水平滚动条
<body>
<style type="text/css">ul li{list-style: none;}
.choose_step{position: relative;}
.choose_list{top:25px;height: 60px;line-height: 20px;padding: 5px;z-index: 9;width: 730px;display: inline-block;font-size: 16px;position: absolute;overflow: hidden;}
.choose_list ul li{cursor: pointer;padding:0 10px;border-right:2px solid #FFFFFF ;margin-top: 5px;float: left;}
.choose_list ul li:last-child{border-right:none}
.scroll_mq_box.on{opacity:1;}
.scroll_mq_box{opacity: 0;transition:1s;width: 730px;height: 10px;background: #C9C5C5;border:1px solid #B2B2B2;border-radius: 10px;margin-top:45px;}
.scrool_body{height:10px;background: #008AFF;width:90px;border-radius:10px;cursor:pointer;position: absolute;top: 51px;left: 10px;}
.choose_list ul{width:1200px;}
</style>
<div class="choose_step">
<div class="choose_list">
<ul>
<li>鼠标移上来才有效果哟</li>
<li>鼠标移上来才有效果哟</li>
<li>鼠标移上来才有效果哟</li>
<li>鼠标移上来才有效果哟</li>
<li>鼠标移上来才有效果哟</li>
<li>鼠标移上来才有效果哟</li>
</ul>
<div class="scroll_mq_box">
<div class="scrool_body">
</div>
</div>
</div>
</div>
jQuery是本地的,复制后需自己重新引入
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
$(".choose_list").hover(function(){
var $this = $(this);
var mwidth = $this.find("ul").outerWidth();
var cwidth = $this.width();
if(mwidth > cwidth ){
$(this).find(".scroll_mq_box").addClass("on");
}
},function(){
$(this).find(".scroll_mq_box").removeClass("on");
});
$(".scrool_body").on("mousedown",function(e){
var $this = $(this);
var cleft = $this.position().left;
var x = e.clientX;
var maxWidth = $this.parents(".scroll_mq_box").width()-$this.width();
//获取文档的width
var mwidth = $this.parents(".choose_list").find("ul").outerWidth();
var cwidth = $this.parents(".choose_list").width();
//要移动的width
var swidth = mwidth - cwidth;
$(document).on("mousemove",function(e){
var nleft = e.clientX - x + cleft;
if(nleft<=7)nleft = 7;
if(nleft>=maxWidth)nleft=maxWidth;
var parcent = nleft/maxWidth;
$this.css({left:nleft});
$this.parents(".choose_list").find("ul").css("marginLeft",-1*swidth * parcent);
}).on("mouseup",function(){
$(document).off();
});
})
</script>
</body>
上面的demo定义的是水平方向的滚动条,下面来介绍一下垂直滚动条
由上面的js可得,在拖动时我改变的是滚动条的left值和文档的margin-left的值,我们要设置垂直滚动条,
X变Y,left变top,width变height,取它们的相反值,前提是要定义好css样式,,,,,
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
