仿制视频播放滚动条效果(加左右控制按钮)-白红宇

仿制视频播放滚动条效果(加左右控制按钮)

阅读量：5227 次

发布时间：2019-06-14

本文共 3103 字，大约阅读时间需要 10 分钟。

仿制视频播放滚动条效果(加左右控制按钮)

<!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>