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

最新推荐文章于 2021-03-11 17:39:05 发布

M_Jehol

最新推荐文章于 2021-03-11 17:39:05 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏： imooc

本文链接：https://blog.youkuaiyun.com/MJing_v/article/details/53711593

imooc 专栏收录该内容

9 篇文章

订阅专栏

本文分享了一次前端开发的学习经历，重点介绍了如何实现平滑滚动与鼠标跟踪效果，包括使用JavaScript控制元素滚动、定时器的设置及浏览器事件监听。

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

<!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.断点调制很有用，用起来~