在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动。
下面针对要实现的效果进行分析:首先是页面基础结构,要实现内容的相对移动,里面的内容需要针对外层盒子相对定位,宽度应该大于外层盒子,而且外层盒子应该超出隐藏。下面是一个滚动条,由底层和滚动两部分组成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border:none;
}
#box{
width: 800px;
height: 200px;
border: 1px solid #ddd;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#box ul{
width: 2600px;
position: absolute;
left: 0;
top: 20px;
}
#box ul li{
float: left;
}
#box_bottom{
position: absolute;
left: 0;
bottom: 0;
background-color: #e8e8e8;
width: 100%;
height: 25px;
}
.mask{
position: absolute;
left: 0;
top:0;
height: 25px; width:100px;
background-color: #aaa;
border-radius: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul id="box_top">
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
</ul>
<div id="box_bottom">
<span class="mask"></span>
</div>
</div>
</body>
</html>
此时我们已经实现了基础的页面效果,但是,需要注意的时,在上面的效果中,我们为滚动条设置了滚动宽度,但是在实际过程中,当外层盒子宽度固定时,滚动内容越长,滚动条会越短。为了实现拖动滚动条时,内容相对运动,在滚动条和内容之间存在着一定的比例关系:滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度,因此,我们首先需要根据这个关系计算出滚动条实际的宽度。
<script>
window.onload = function () {
//获取需要的标签
var box = document.getElementById("box");
var box_top = document.getElementById("box_top");
var box_bottom = document.getElementById("box_bottom");
var mask = box_bottom.children[0];
//滚动条的长度
// 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
mask.style.width = mask_len + 'px';
}
</script>
接下来就需要监听鼠标事件了,首先是鼠标的移入事件,当鼠标移入时,记录鼠标相对于盒子左边的距离,当鼠标移动时,根据鼠标的移动距离,改变滚动条的位置,实现滚动效果,同时需要计算出内容相对需要滚动的距离,最后就是鼠标移出事件,当鼠标移出时,清空事件。
其中,在滚动条移动和内容滚动之间也存在一个换算关系:内容走的距离 / 滚动条走的距离 = (内容的长度 - 盒子的长度)/ (盒子长度 - 滚动条的长度)。因此,当我们计算处了滚动条走的距离后,就可以得出内容走的距离了。
//鼠标事件
mask.onmousedown = function (event) {
var e = event || window.event;
//求出初始值
var beginX = e.clientX - mask.offsetLeft;
document.onmousemove = function (event) {
var e = event || window.event;
//求出移动的距离
var endX = event.clientX - beginX;
// 滚动边界值
if(endX < 0){
endX = 0;
}else if(endX >= box.offsetWidth - mask.offsetWidth){
endX = box.offsetWidth - mask.offsetWidth;
}
//运动效果
mask.style.left = endX + 'px';
// 内容走的距离 = (内容的长度 - 盒子的长度) \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离
var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
box_top.style.left = -content_len + 'px';
return false;
};
document.onmouseup = function () {
document.onmousemove = null;
}
}
只需要把握住盒子,滚动条,内容之间的换算关系,计算处相对运动距离,上面的效果就可以轻松实现了。
完整代码下载:点这里