一个很简陋的向上无缝滚动

由 愚人码头 撰写 　

———————–2008年12月26日更新—————————-

向上无缝滚动的封装已经发布：http://www.css88.com/article.asp?id=577

欢迎提出意见，建议，让我们共同进步!

——————————————————————————————–

实现思路：

一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop（上下滚动）或者scrollLeft（左右滚动）达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />  
  5. <title>无标题文档</title>  
  6. <style type=“text/css”>  
  7. <!–   
  8. ol,ul{list-style:none; margin:0}   
  9. li{ height:25px}   
  10. –>  
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <div id=“demo” style=“ overflow: hidden; width: 322px; height: 50px”>  
  16.     <ul id=“demo1″>  
  17.         <li>111</li>  
  18.         <li>222</li>  
  19.         <li>333</li>  
  20.         <li>444</li>  
  21.         <li>444</li>  
  22.         <li>444</li>  
  23.         <li>444</li>  
  24.         <li>444</li>  
  25.     </ul>  
  26.     <ul id=“demo2″></ul>  
  27. </div>  
  28. <script type=“text/javascript”>  
  29.   
  30.   var speed1=0;   
  31.   var MyMar1;      
  32.   
  33.   
  34.   function toleft(){   
  35.           speed1=30;//滚段速度   
  36.           document.getElementById(“demo2″).innerHTML=document.getElementById(“demo1″).innerHTML;   
  37.           function Marquee1(){   
  38.               //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetHeight与scrollTop刚好相等   
  39.               if(document.getElementById(“demo2″).offsetHeight-document.getElementById(“demo”).scrollTop<=0){   
  40.                   document.getElementById(“demo”).scrollTop-=document.getElementById(“demo2″).offsetHeight;   
  41.               }   
  42.               else{   
  43.                 //demo开始重新移动   
  44.                 document.getElementById(“demo”).scrollTop++;   
  45.               }   
  46.           }   
  47.           //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID   
  48.           MyMar1=setInterval(Marquee1,speed1);   
  49.           //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止   
  50.           document.getElementById(“demo”).onmouseover=function(){   
  51.               clearInterval(MyMar1);   
  52.           }   
  53.           //当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动   
  54.           document.getElementById(“demo”).onmouseout=function()    
  55.           {   
  56.               MyMar1=setInterval(Marquee1,speed1);   
  57.           }   
  58.             
  59.   }   
  60.   toleft();   
  61. </script>     
  62.   
  63. </body>  
  64. </html>  

码头在进段时间封装这种向上、向左、向右的无缝滚动，尽情关注。

当然也可以看看《【JS特效】不间断滚动效果通用类》：http://www.css88.com/article.asp?id=433

演示:http://www.css88.com/demo/run/run.htm

更多相关链接：

这篇日志由 愚人码头, 发表在 2009年03月26日 于 2:00 下午, 文件归档于 JS与RIA 标签为 . 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.

或许你对这些感兴趣:

刚刚被浏览过的文章：

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时，昵称或个人网站填的是商业网站的，一概标记为垃圾评论不予显示，并设置相关网站为过滤关键字，提交到google、百度垃圾网站数据库