花了一个星期去弄懂这节课,自己本来就不聪明,慢慢来吧
<!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.οnmοuseοver=function(){//添加鼠标事件
clearInterval(myscroll);//清除定时器
}
area.οnmοuseοut=function(){//添加鼠标事件
myscroll=setInterval("scroll()",time);//添加一个定时器
}
</script>
</body>
</html>
这次弄了这么久
一是自己动手写真是不一样,完全理解有一定难度
二是自己的拖延症
但好在自己收获了一些东西,比如
1.学会了用断点调试,找出了一开始为什么不动
因为 0%任意数==0恒成立
2.深刻理解了两个定时器 具体使用规则
3.有个问题,如果我鼠标多次移动,就会添加多个事件,会疯狂的滚动,这个以后要详细再学
4.知道了scrolltop,scrollheight,offsetheight等一些高度具体细节,但是各个浏览器都不一样,定义都不一样,好烦,所以要学的还有很多
5.断点调制很有用,用起来~