你的位置:首页 > 软件开发 > Java > 无缝不间断图片垂直滚动效果

无缝不间断图片垂直滚动效果

发布时间:2015-07-16 21:00:13
无缝不间断图片垂直滚动效果:垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下:<!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 (#换成@)。