无缝不间断图片垂直滚动效果:垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下:<!DOCTYPE html><html><head><meta ...
无缝不间断图片垂直滚动效果:
垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下:
<!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='/images/loading.gif' data-original="mytest/JS/ad_logo_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/blogchina_logo_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/cri_logo.jpg" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/dadushi_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/daqi_logo.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/dianping_Logo_66_23.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/efulogo_88x31_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/elady8831_1_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/sina_lady_2.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/uusee_logo_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/ered_logo_1.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/linklogo_me6623.gif" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/zgsslogo_1.jpg" /></li> <li><img src='/images/loading.gif' data-original="mytest/JS/singdao_logo_1.gif" /></li> </ul> <ul id="second"></ul> </div> </div> </body> </html>
原标题:无缝不间断图片垂直滚动效果
关键词:图片
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。