无缝不间断图片垂直滚动效果:
垂直滚动效果虽然使用频率没有水平滚动高，不过也有大量的使用，例如垂直滚动的友情链接效果，下面就结合实例简单介绍一下如何实现此效果，代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>图片友情链接上下滚动效果代码-蚂蚁部落</title> <style type="text/CSS"> div{ width:280px; height:240px; overflow:hidden; } #main{ margin:0px auto; margin-top:50px; } ul{ list-style:none; margin:0px auto; width:180px; height:240px; } li{ width:90px; height:35px; float:left; text-align:center; } </style> <script type="text/javascript"> window.onload=function(){ var speed=10; var parent=document.getElementById("parent"); var first=document.getElementById("first"); var second=document.getElementById("second"); second.innerHTML=first.innerHTML; function done(){ if(parent.scrollTop - first.offsetHeight >=0){ parent.scrollTop-=second.offsetHeight; } else{ parent.scrollTop++; } } var MyMar=setInterval(done,speed); parent.onmouSEOver=function(){clearInterval(MyMar)} parent.onmouseout=function(){MyMar=setInterval(done,speed)} } </script> </head> <body> <div id="main"> <div id="parent"> <ul id="first"> <li><img src="mytest/JS/ad_logo_1.gif" /></li> <li><img src="mytest/JS/blogchina_logo_1.gif" /></li> <li><img src="mytest/JS/cri_logo.jpg" /></li> <li><img src="mytest/JS/dadushi_1.gif" /></li> <li><img src="mytest/JS/daqi_logo.gif" /></li> <li><img src="mytest/JS/dianping_Logo_66_23.gif" /></li> <li><img src="mytest/JS/efulogo_88x31_1.gif" /></li> <li><img src="mytest/JS/elady8831_1_1.gif" /></li> <li><img src="mytest/JS/sina_lady_2.gif" /></li> <li><img src="mytest/JS/uusee_logo_1.gif" /></li> <li><img src="mytest/JS/ered_logo_1.gif" /></li> <li><img src="mytest/JS/linklogo_me6623.gif" /></li> <li><img src="mytest/JS/zgsslogo_1.jpg" /></li> <li><img src="mytest/JS/singdao_logo_1.gif" /></li> </ul> <ul id="second"></ul> </div> </div> </body> </html>
以上代码实现了图片不间断无缝垂直滚动效果，下面简单介绍一下它的实现过程:
一.实现原理:
为了实现图片向上滚动效果，当parent元素中的内容超过它的高度的时候，利用setInterval()函数周期性调用done()函数实现parent的scrollTop属性值不断增加的效果，这样就实现了滚动效果。为了实现无缝滚动，将first对象中的图片通过second.innerHTML=first.innerHTML复制一份放置于second对象中，这样当first对象向上滚动的时候，second对象就能够填补first对象后面原本会出现的空白区域，并且当parent的scrollTop属性值等于图first对象的宽度的时候，也就是first对象向上滚动被完全隐藏的时候，再将parent的scrollTop属性值重置为零，重新开始新的一轮滚动，如此往复。
二.代码注释:
1.window.onload=function(){}规定文档加载完成之后再去执行大括号中的代码。
2.var speed=10设置滚动速度，越大滚动的越慢。
3.var parent=document.getElementById("parent")获取parent对象。
4.var first=document.getElementById("first")获取first对象。
5.var second=document.getElementById("second")获取second对象。
6.second.innerHTML=first.innerHTML将first中的内容设置到second对象中去。
7.function done()声明一个函数用于实现滚动。
7.1.if(parent.scrollTop-first.offsetHeight>=0)判断parent的内容向上滚动的尺寸是否等于first对象的宽度，如果等于则通过parent.scrollTop-=second.offsetHeight语句将parent.scrollTop值设置为零，如果不相等则parent.scrollTop++，即继续向上滚动。
8.var MyMar=setInterval(done,speed)循环执行done()函数，并返回一个标识id值，以便clearInterval函数使用。
9.parent.onmouseover=function(){clearInterval(MyMar)}当鼠标放在parent对象的时候，停止滚动。
10. parent.onmouseout=function(){MyMar=setInterval(done,speed)}当鼠标离开的时候继续滚动。
原文地址是:http://www.51texiao.cn/Javascriptjiaocheng/2015/0428/305.html
最为原始地址是:http://www.softwhy.com
新闻热点
疑难解答
