您的位置：首页 > 其它

自定义滚动条

2016-04-27 14:57 225 查看

cv党：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#out{border: 1px solid black;width: 600px;overflow: hidden;}
#inner{white-space: nowrap;font-size: 0;}
#inner div{width: 400px;height: 300px;display: inline-block;text-align: center;line-height: 300px;
outline: 1px solid blueviolet;font-size: 30px;}
#scrollout{width: 600px;height: 20px;border: 1px solid black;}
#scrollinner{height: 100%;background-color: chartreuse;border-radius:3px;margin-left: 0;}
</style>
</head>
<body>
<div id="out"><div id="inner">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div></div>
<div id="scrollout"><div id="scrollinner"></div></div>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript">
myScroll($("#out"),$("#inner"),$("#scrollinner"))
function myScroll(mainout,maininner,scrollInner){
function countwidth(){
return maininner.children().length*maininner.children().eq(0).width()
}
var thewidth =countwidth() ////拖块的宽度计算
scrollInner.width(mainout.width()* mainout.width()/thewidth);
var ismove = false; ////查看鼠标是否按下
var oldX /////记录初始位置
scrollInner.mousedown(function(e){
ismove = true
oldX=parseInt(e.clientX)
})
$(document).mouseup(function(){
ismove = false
})
$(document).mousemove(function(e){
console.log(ismove);
if(!ismove) return
var newX=parseInt(e.clientX)
var distance=newX-oldX;
if(parseInt(scrollInner.css("margin-left"))<=0&&distance<0){ ////判断是否超出左边界
return
}
if(distance>0&&parseInt(scrollInner.css("margin-left"))>= mainout.width()-scrollInner.width()){////判断是否超出右边界
return
}
var marginLeft=parseInt(scrollInner.css("margin-left"))+ +distance
marginLeft = marginLeft<0?0:marginLeft;//////超出左边
marginLeft = (marginLeft> mainout.width()-scrollInner.width())? mainout.width()-scrollInner.width():marginLeft ////超出右边
scrollInner.css("margin-left",marginLeft);
maininner.css("margin-left",-marginLeft*thewidth/ mainout.width())
oldX=newX
})
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航