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

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

向上无缝滚动的封装已经发布:https://www.html.cn/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特效】不间断滚动效果通用类》:https://www.html.cn/article.asp?id=433

演示:https://www.html.cn/demo/run/run.htm

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个很简陋的向上无缝滚动

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏