JS入门之无缝滚动

最新推荐文章于 2024-09-21 11:34:18 发布

风势暗伤

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量251

点赞数 1

分类专栏：前端文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_33547926/article/details/52238845

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.js代码写在head 标签里和body标签后有很大区别。最好写在body标签后面，因为按照载入顺序，页面dom还未加载，js代码会出现空指针异常。css最好写在head标签里。

2.写css时，注意对元素padding:0;margin:0;初始化；

3.setInterval(function x,time);每过time(毫秒)时间，执行一次function x; 停止计时器使用clearInterval();

4.setTimeout(function x,time);延迟time(毫秒)后，执行function x,只执行一次；

5.使用element.scrollTop可以设置元素上滑的距离。因此可以使用计时器和scrollTop来实现滚动效果。

具体实现代码如下：

<body>
<div id="mainBox">
   <ul id="cont1">
      <li><a href="#">1.入门简介</a></li>
	  <li><a href="#">2.课程介绍</a></li>
	  <li><a href="#">3.什么是函数</a></li>
	  <li><a href="#">4.面向对象</a></li>
	  <li><a href="#">5.编程练习</a></li>
	  <li><a href="#">6.多线程相关</a></li>
	  <li><a href="#">7.swing编程</a></li>
	  <li><a href="#">8.spirng入门</a></li>
	  <li><a href="#">9.spirng入门</a></li>
   </ul>
   <ul id="cont2">
   </ul>
</div>
<script type="text/javascript">
     var area=document.getElementById('mainBox');
	var con1=document.getElementById('cont1');
    var con2=document.getElementById('cont2');
    area.scrollTop = 0;
	var speed=50;
	con2.innerHTML=con1.innerHTML;
	function acfun(){
	if(area.scrollTop<=con1.offsetHeight)
	{
	     area.scrollTop++;
	}else{
	    area.scrollTop=0;
	}}
	var myScroll = setInterval('acfun()',speed);
    area.onmouseover = function(){
	 clearInterval(myScroll);
	}
    area.onmouseout = function(){
	 myScroll = setInterval("acfun()",speed);
	} 

</script>
</body>