<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖动效果</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
img{border:0;}
a{color:#ccc;text-decoration:none;}
a:hover{color:#ccc;text-decoration:underline;}
.wrapper{position:relative;800px;height:180px;overflow:hidden;margin:0 auto;border:1px solid #ccc;}
.wrapper .videoContent{position:absolute;top:10px;left:0;height:150px;}
.videoContent li{float:left;}
.videoContent a{display:block;100px;height:100px;margin-right:10px;border:1px solid red;vertical-align:middle;text-align:center;line-height:100px;}
.wrapper .btnDiv{position:absolute;left:0;bottom:20px;100%;height:6px;background:#000;cursor:pointer;overflow:hidden;}
.wrapper .btn{position:absolute;left:0;bottom:13px;40px;height:20px;border:0;background:blue;cursor:pointer;overflow:hidden;}
.pre{display:block;position:absolute;top:40px;left:0;30px;height:20px;background:#ccc;line-height:20px;cursor:pointer;}
.next{display:block;position:absolute;top:40px;right:0px;30px;height:20px;background:#ccc;line-height:20px;cursor:pointer;}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<ul id="videoContent" class="videoContent">
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
<li><a href="#" target="_blank">拖动的内容</a></li>
</ul>
<div class="btnDiv" id="btnDiv"></div>
<div class="btn" id="btn">拖动</div>
<span class="pre" id="pre">《《</span>
<span class="next" id="next">》》</span>
</div>
<script type="text/javascript">
window.onload = function(){
var oWrapper = getId("wrapper");
var btnDiv = getId("btnDiv");
var pre = getId("pre");
var next = getId("next");
var oUl = getDom("ul",oWrapper)[0];
var oLi = oUl.getElementsByTagName("li");
var oLiLength = oLi.length;
var oBtn = getId("btn");
var disX = 0,step=0,moveLeft=0,timer = null;
// oUl width
oUl.style.width = oLiLength * oLi[0].offsetWidth + "px";
// 检测 溢出的li 是否大于滚动条的总宽度;
var scrWidth = oWrapper.clientWidth - (oUl.offsetWidth - oWrapper.clientWidth);
if(scrWidth > 0){
oBtn.style.width = scrWidth + "px";
}else{
step = Math.abs( (oUl.offsetWidth - oWrapper.clientWidth)/(oWrapper.clientWidth-40) );
oBtn.style.width = "40px";
}
// 开始拖动
oBtn.onmousedown = function(event){
var oEvent = event || window.event;
var oPageX = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
disX = oWrapper.offsetLeft + oPageX;
document.onmousemove = function(event){
var oEvent = event || window.event;
moveLeft = oEvent.clientX - disX;
dragMove(moveLeft);
}
if(oEvent.stopPropagation){
oEvent.stopPropagation();
}else{
oEvent.cancelBubble = true;
}
}
pre.onmousedown = function(event){
timer = setInterval(function(){
moveLeft-=10;
dragMove(moveLeft);
},80)
}
pre.onmouseup = function(){
clearInterval(timer);
moveLeft-=10;
dragMove(moveLeft);
}
next.onmousedown = function(event){
timer = setInterval(function(){
moveLeft+=10;
dragMove(moveLeft);
},80);
}
next.onmouseup = function(){
clearInterval(timer);
moveLeft+=10;
dragMove(moveLeft);
}
document.onmouseup = function(){
document.onmousemove = null;
}
btnDiv.onclick = function(event){
var oEvent = event || window.event;
var otarget = oEvent.target?oEvent.target:oEvent.srcElement;
if(otarget.id == "btnDiv"){
var oPageX = oEvent.layerX?oEvent.layerX:oEvent.offsetX;
}
moveLeft = oPageX;
dragMove(oPageX)
if(oEvent.stopPropagation){
oEvent.stopPropagation();
}else{
oEvent.cancelBubble = true;
}
}
function dragMove(moveLeft){
if(moveLeft<0){
oBtn.style.left = "0px";
oUl.style.left = "0px";
}else if(moveLeft>(oWrapper.clientWidth-oBtn.offsetWidth)){
moveLeft = oWrapper.clientWidth-oBtn.offsetWidth;
}else{
oBtn.style.left = parseInt(moveLeft) + step + "px";
if(step==0){
oBtn.style.left = parseInt(moveLeft) + "px";
oUl.style.left = - parseInt(moveLeft) + "px";
}else{
oBtn.style.left = parseInt(moveLeft) + step + "px";
oUl.style.left = -(parseInt(moveLeft) * step) + "px";
}
}
}
}
function getStyle(obj,attr){
return obj.currentStyle?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
}
function getDom(dom,obj){
var obj = obj || document;
return obj.getElementsByTagName(dom);
}
function getId(id){
return document.getElementById(id);
}
</script>
</body>
</html>