仿网易底部滚动图.gif
实现思路：根据HTML和CSS可以基本知道，网页的基本布局！全部通过定位技术来进行操作，这部分就不解释了，前端页面对着效果自己写，最难得还是JavaScript，涉及到逻辑不会就很难，我的思路,首先让
bar 滚动条动起来。把动起来的监听写出来，通过 onmousedown和onmousemove 两个函数来实现。再去算滚动条的长度。根据这个公式来计算图片和滚动条的比例：barwith/700 = 700/allwidth = rate
接着去写图片的运动，运动长度根据滚动条的来，还是用到上面的比例关系。最后添加验证修复小BUG。比较难得操作已经在源码中注释。
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿网易底部滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 700px;
height: 150px;
position: absolute;
left: 50%;
top: 100px;
margin-left: -380px;
padding: 0 30px;
border: 1px solid #7c7c7c;
/*background: #ccc;*/
}
.box .m_unit {
position: relative;
width: 5000px;
}
.box .images {
width: 700px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.box .images ul {
list-style: none;
}
.box .images ul li {
float: left;
width: 200px;
height: 130px;
margin-right: 10px;
}
.box .btns .rightbtn {
position: absolute;
right: 0;
top: 50%;
height: 65px;
width: 20px;
margin-top: -32.5px;
background: url(images/bar.png) no-repeat -42px 0;
}
.box .btns .leftbtn {
position: absolute;
left: 0;
top: 50%;
height: 65px;
width: 20px;
margin-top: -32.5px;
background: url(images/bar.png);
}
.box .bar {
position: absolute;
bottom: 0;
left: 50%;
height: 20px;
margin-left: -350px;
width: 700px;
background-color: #2b2b2b;
}
.span1{
position: absolute;
top: 3px;
left: 0;
width: 81px;
height: 15px;
background: url(images/bg.png) 0 -32px;
}
.span2{
position: absolute;
width:11px;
height: 15px;
background: url(images/bg.png);
}
.span3{
position: absolute;
top: 0;
right: 0px;
width: 11px;
height: 15px;
background: url(images/bg.png) -24px 0;
}
.span4{
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
width: 10px;
height: 15px;
background: url(images/bg.png) -14px 0;
}
</style>
</head>
<body>
<div class="box">
<div class="btns">
<div class="rightbtn" id="rightbtn"></div>
<div class="leftbtn" id="leftbtn"></div>
</div>
<div class="images">
<ul class = "m_unit" id = "m_unit">
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (1).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (2).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (3).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (4).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (5).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (6).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (7).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (8).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (9).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (10).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (11).jpg" alt="动漫"></a></li>
<li><a href=""><img src="G:\极简壁纸\七森博客/animate (12).jpg" alt="动漫"></a></li>
</ul>
</div>
<div class="bar">
<span class="span1" id="bar">
<span class="span2"></span>
<span class="span3"></span>
<sapn class="span4"></sapn>
</span>
</div>
</div>
<script>
//得到操作的元素
var leftbtn = document.getElementById("leftbtn");
var rightbtn = document.getElementById("rightbtn");
var m_unit = document.getElementById("m_unit");
var bar = document.getElementById("bar");
//为了计算滚动条的长度，先得出图片总数
var lislength = m_unit.getElementsByTagName("li").length;
//得出图片总长，减去最后一个图片的right-margin达到图片紧贴边框；
var allwidth = lislength*210 -10;
//根据比例计算出rate，在算出滚动条的宽。以短及长。
var rate = 700 / allwidth;
var barwidth = rate * 700;
//设置初始滚动条长度
bar.style.width = barwidth + "px";
//初始滚动条的位置
var nowbarleft = 0;
//初始图片的位置
var nowimageleft = 0;
//滚动监听
bar.onmousedown = function(event){
event = event || window.event;
deltaX = event.clientX - bar.offsetLeft;
bar.onmousemove = function(event){
event = event || window.event;
var nowbarleft = event.clientX - deltaX;
//验证，防止滚动条出线
if(nowbarleft < 0){
nowbarleft = 0;
}else if(nowbarleft>700 - barwidth){
//好好推想这个距离，是固定的计算。
nowbarleft = 700 - barwidth;
}
m_unit.style.left = -nowbarleft/rate+ "px";
bar.style.left = nowbarleft +"px";
}
}
//滚动监听
document.onmouseup = function(){
bar.onmousemove = null;
}
rightbtn.onclick = function(){
//两个信号量的改变
nowimageleft -= 200;
nowbarleft += 200 * rate ;
//验收 左按钮可以和右按钮的验证内容进行替换，
//点击的效果就不是轮换的了。
if(nowimageleft < -allwidth + 700){
nowimageleft = 0;
nowbarleft = 0;
}
m_unit.style.left = nowimageleft + "px";
bar.style.left = nowbarleft + "px";
}
leftbtn.onclick = function(){
//两个信号量的改变
nowimageleft += 50;
nowbarleft -= 50 * rate ;
//验收
if(nowimageleft >0){
nowimageleft = -allwidth + 700;
nowbarleft = 700 - barwidth;
}
m_unit.style.left = nowimageleft + "px";
bar.style.left = nowbarleft + "px";
}
</script>
</body>
</html>
网友评论