仿制视频播放滚动条效果
<!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;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;100px;height:100px;background:#ccc;}
.lineDiv{position:relative;height:1px;overflow:hidden;}
.lineBtn{position:absolute;top:110px;left:0;80px;height:20px;background:#c9b07b;text-align:center;line-height:20px;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>
<script type="text/javascript">
window.onload = function(){
var owrapper = getId("wrapper");
var olineBtn = getId("lineBtn");
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;
olineBtn.onmousedown = function(e){
var oEvent = e || event;
var curWidth = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
disX = owrapper.offsetLeft + curWidth;
document.onmousemove = function(e){
var oEvent = e || event;
var moveLeft = oEvent.clientX - disX;
document.title = moveLeft;
if(moveLeft <= 0 ){
moveLeft = 0;
}else if(moveLeft >= owrapper.clientWidth-olineBtn.clientWidth ){
moveLeft = parseInt(owrapper.clientWidth-oLi.clientWidth)+1+"px";
}
olineBtn.style.left = moveLeft + "px";
owrapper.children[0].style.left = - moveLeft + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
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>