仿制视频播放滚动条效果(加左右控制按钮)
仿制视频播放滚动条效果(加左右控制按钮)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12313</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
a{text-decoration:none;}
.wrapper{position:relative;width:600px;height:140px;margin:0 auto;border:1px solid red;overflow:hidden;}
.wrapper ul{position:absolute;top:4px;left:0;height:100px;}
.wrapper ul li{float:left;padding-right:20px;line-height:100px;text-align:center;}
.wrapper ul li a{display:block;width:100px;height:100px;background:#ccc;}
.lineDiv{position:relative;height:1px;overflow:hidden;}
.lineBtn{position:absolute;top:110px;left:0;width:80px;height:20px;background:#c9b07b;text-align:center;line-height:20px;cursor:pointer;}
.left{position:absolute;top:35px;left:-10px;width:40px;height:40px;background:#64afde;line-height:40px;text-align:center;cursor:pointer;}
.right{position:absolute;top:35px;left:560px;width:40px;height:40px;background:#64afde;line-height:40px;text-align:center;cursor:pointer;}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<ul>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
<li><a href="#" target="_blank">1111</a></li>
</ul>
<div class="lineBtn" id="lineBtn">btn</div>
<div class="left" id="left"><</div>
<div class="right" id="right">></div>
</div>
<script type="text/javascript">
window.onload = function(){
var owrapper = getId("wrapper");
var olineBtn = getId("lineBtn");
var oleft = getId("left");
var oright = getId("right");
var oLi = getDom("li",owrapper);
owrapper.children[0].style.width = oLi.length*oLi[0].offsetWidth + "px";
var owLeft = owrapper.offsetLeft;
olineBtn.style.width = owrapper.children[0].clientWidth - owrapper.clientWidth +"px";
var disX = 0,moveLeft = 0;
olineBtn.onmousedown = function(e){
var oEvent = e || event;
var curWidth = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
disX = owrapper.offsetLeft + curWidth;
document.onmousemove = function(e){
divMove(e);
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
oleft.onclick = function(e){
moveLeft-=10;
divMove(e,moveLeft);
}
oright.onclick = function(e){
moveLeft+=10;
divMove(e,moveLeft);
}
function divMove(e,movestep){
var oEvent = e || event;
moveLeft = movestep?movestep:(oEvent.clientX - disX);
if(moveLeft <= 0 ){
moveLeft = 0;
}else if(moveLeft >= owrapper.clientWidth-olineBtn.clientWidth ){
moveLeft = parseInt(owrapper.clientWidth-oLi.clientWidth)+"px";
}
olineBtn.style.left = moveLeft + "px";
owrapper.children[0].style.left = - moveLeft + "px";
}
}
function getStyle(obj,attr){
return obj.currentStyle?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
}
function getDom(dom,obj){
obj = obj || document;
return obj.getElementsByTagName(dom);
}
function getId(id){
return document.getElementById(id)
}
</script>
</body>
</head>
</html>
