您的位置：首页 > 其它

深入理解-imooc 滚动显示效果制作

2016-12-17 19:50 447 查看

花了一个星期去弄懂这节课，自己本来就不聪明，慢慢来吧

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;

}

#box1{
background-color: greenyellow;
width: 200px;
height: 200px;
margin: 20px;
overflow: hidden;//多出来的部分隐藏

}

li{
font-size: 50px;

}
#mousefollow{
width: 100px;
height: 100px;
position: relative;
}

</style>

<body>
<div >
<div id="mousefollow">
lalala!
</div>

<div id="box1" class="box">
<ul id="con1">
<li>111111111111</li>
<li>211111111111</li>
<li>311111111111</li>
<li>411111111111</li>
<li>511111111111</li>
<li>611111111111</li>
<li>711111111111</li>
<li>811111111111</li>
<li>911111111111</li>
</ul>

</div>

</div>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

var mouse = document.getElementById("mousefollow");//鼠标跟随效果
document.onmousemove = function(){

var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
mouse.style.left = event.clientX + scrollleft +10 +"px";
mouse.style.top = event.clientY + scrolltop + 10 + "px";
}

var area=document.getElementById('box1');
var time=30;
var delay=1000;
var ilHeight=59;//一行的高度

var myscroll=setInterval("scroll()",time);

area.innerHTML+=area.innerHTML;//自我克隆
area.scrollTop=0;
function startmove(){//开始移动的函数
area.scrollTop++;
myscroll=setInterval("scroll()",time);//调用

}

function scroll(){
if(area.scrollTop%ilHeight==0){//若移动一行则执行
clearInterval(myscroll);//清空定时器
setTimeout("startmove()",delay);//新的定时器
}else{

if(area.scrollTop>=area.scrollHeight/2){//无缝滚动，若卷的高度超过自己克隆后高度的一半 则执行
area.scrollTop=0;//清空
}else{
area.scrollTop++;//卷高++
}
}

}

area.onmouseover=function(){//添加鼠标事件
clearInterval(myscroll);//清除定时器
}

area.onmouseout=function(){//添加鼠标事件
myscroll=setInterval("scroll()",time);//添加一个定时器
}

</script>
</body>
</html>

这次弄了这么久

一是自己动手写真是不一样，完全理解有一定难度

二是自己的拖延症

但好在自己收获了一些东西，比如

1.学会了用断点调试，找出了一开始为什么不动

因为 0%任意数==0恒成立

2.深刻理解了两个定时器具体使用规则

3.有个问题，如果我鼠标多次移动，就会添加多个事件，会疯狂的滚动，这个以后要详细再学

4.知道了scrolltop，scrollheight，offsetheight等一些高度具体细节，但是各个浏览器都不一样，定义都不一样，好烦，所以要学的还有很多

5.断点调制很有用，用起来~

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

标签：

相关文章推荐

新的分享

章节导航