向上无缝滚动的封装(感谢demo,BUG已修复)

实现思路:

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

可以看看这个文章:https://www.css88.com/article.asp?id=571

这里做了一下改进,demo1对象可以根据demo获得,demo2可以复制demo1对象,这里要注意ff下的空白节点问题。可以看看下面这段代码:

JavaScript代码
  1. var?scrollBox?=?document.getElementById(this.boxID); ??
  2. var?appendBox=first(scrollBox).cloneNode(true); ??
  3. scrollBox.appendChild(appendBox);??

?

向上无缝滚动的封装全部代码如下:

看演示地址:https://www.css88.com/demo/Marquee/scroll_text_ok.html

感谢demo的鼎力帮助,如果您对JS也敢兴趣,对我们封装的以下代码有意见建议,或者想和我一起探讨JS技术,那么加入我们,我们的qq群:7617538

该代码有误,请查看下面2008年12月29日更新

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>??? ??
  17. ????????<li>111</li>??? ??
  18. ????????<li>222</li>??? ??
  19. ????????<li>333</li>??? ??
  20. ????????<li>444</li>??? ??
  21. ????????<li>555</li>??? ??
  22. ????????<li>666</li>??? ??
  23. ????????<li>777</li>??? ??
  24. ????????<li>888</li>??? ??
  25. ????</ul>??
  26. </div>??
  27. <div?id=“demo2”??style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
  28. ????<ul>??? ??
  29. ????????<li>aaa</li>??? ??
  30. ????????<li>bbb</li>??? ??
  31. ????????<li>ccc</li>??? ??
  32. ????????<li>ddd</li>??? ??
  33. ????????<li>eee</li>??? ??
  34. ????????<li>fff</li>??? ??
  35. ????????<li>ggg</li>??? ??
  36. ????????<li>hhh</li>??? ??
  37. ????</ul>??
  38. </div>??? ??
  39. <script?type=“text/javascript”>??
  40. ?????//—查找相关元素的下一个兄弟元素—//???? ??
  41. ????function?next(elem){???? ??
  42. ????????do{???? ??
  43. ??????????? elem=elem.nextSibling;???? ??
  44. ????????}while(elem&&elem.nodeType!=1);???? ??
  45. ????????return?elem;???? ??
  46. ????}???? ??
  47. ????//—查找第一个子元素的函数—//???? ??
  48. ????function?first(elem){???? ??
  49. ??????? elem=elem.firstChild;???? ??
  50. ????????return?elem?&&?elem.nodeType!=1?next(elem):elem;???? ??
  51. ????} ??
  52. ???? ??
  53. ????var?scrollText={ ??
  54. ????????init:function(scrollbox,speed){ ??
  55. ????????????this.boxID=scrollbox; ??
  56. ????????????this.scrollSpeed=speed||10;//初始化的速度10 ??
  57. ????????}, ??
  58. ????????obj?:?function(){ ??
  59. ????????????var?scrollBox?=?document.getElementById(this.boxID); ??
  60. ????????????var?appendBox=first(scrollBox).cloneNode(true); ??
  61. ????????????scrollBox.appendChild(appendBox); ??
  62. ????????????return?{
  63. ?????????????????? scrollBox?:?scrollBox,
  64. ?????????????????? appendBox?:appendBox,?
  65. ?????????????????? scrollSpeed?:scrollText.scrollSpeed
  66. ??????????? }; ??
  67. ????????}, ??
  68. ????????scrollUp?:?function(){ ??
  69. ????????????var?m?=?this.obj(); ??
  70. ????????????var?doScr?=?setInterval(function(){ ??
  71. ????????????????//以下的m[‘scrollBox’]等价于m.scrollBox ??
  72. ????????????????if(m[‘appendBox’].offsetHeight<=m[‘scrollBox’].scrollTop){ ??
  73. ????????????????????m[‘scrollBox’].scrollTop-=m[‘appendBox’].offsetHeight; ??
  74. ????????????????}else{ ??
  75. ????????????????????m[‘scrollBox’].scrollTop++; ??
  76. ????????????????} ??
  77. ????????????},this.scrollSpeed); ??
  78. ????????????//当鼠标移入demo时,重新setInterval让方法执行,这样图片会继续移动???? ??
  79. ????????????m[‘scrollBox’].onmouseover=function(){???? ??
  80. ????????????????clearInterval(doScr);???? ??
  81. ????????????}???? ??
  82. ??????????//当鼠标移出demo时,重新setInterval让方法执行,这样图片会继续移动???? ??
  83. ??
  84. ????????????m[‘scrollBox’].onmouseout=function()?{?? ??
  85. ????????????????clearInterval(doScr);? ??
  86. ????????????????scrollText.init(this.id,?m[‘scrollSpeed’]); ??
  87. ????????????????scrollText.scrollUp(); ??
  88. ????????????}? ??
  89. ????????} ??
  90. ????} ??
  91. ????scrollText.init(“demo”,10); ??
  92. ????scrollText.scrollUp(); ??
  93. ????scrollText.init(“demo2”,50); ??
  94. ????scrollText.scrollUp(); ??
  95. </script>?????? ??
  96. ??? ??
  97. </body>??? ??
  98. </html>??? ??

如果您有什么好的方式,可以和我们一起讨论。我们的qq群:7617538


demo刚刚发来一个改进,如果在init中直接return this,那么就可以链式调用

?

JavaScript代码
  1. var?scrollText={??? ??
  2. ??????????? ??
  3. ????????init:function(scrollbox,speed){??? ??
  4. ????????????this.boxID=scrollbox;??? ??
  5. ????????????this.scrollSpeed=speed||10;??? ??
  6. ????????????return?this;??//注意这里是新加的? ??
  7. ????????},??? ??
  8. ……??

那么在调用的时候就可以这样谢了

JavaScript代码
  1. scrollText.init(“demo”).scrollUp();??

等价于原来的

JavaScript代码
  1. scrollText.init(“demo”); ??
  2. scrollText.scrollUp();??

其他左右滚动封装尽请期待。。。

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

感谢残冰的留言,该问题确实存在,经过demo的努力已经修复

?

JavaScript代码
  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?style=“?height:50px;?line-height:50px;?color:#FFFFFF;?background:#333333;?margin-bottom:20px;?padding-left:30px;?font-size:16px”>?向上无缝滚动的封装的演示-WEB前端开发DOME–<a?style=“color:#FFFFFF”?href=“http://www.9demo.com”>www.9demo.com</a>–<a?style=“color:#FFFFFF”?href=“https://www.css88.com”>www.css88.com</a></div>?? ??
  16. <p>这个是速度为10的滚动</p> ??
  17. <div?id=“demo”?style=“?overflow:?hidden;?width:?322px;?height:?50px”> ??
  18. ????<ul>??? ??
  19. ????????<li>111</li>??? ??
  20. ????????<li>222</li>??? ??
  21. ????????<li>333</li>??? ??
  22. ????????<li>444</li>??? ??
  23. ????????<li>555</li>??? ??
  24. ????????<li>666</li>??? ??
  25. ????????<li>777</li>??? ??
  26. ????????<li>888</li>??? ??
  27. ????</ul> ??
  28. </div> ??
  29. <hr?/> ??
  30. <p>这个是速度为50的滚动</p> ??
  31. <div?id=“demo2”??style=“?overflow:?hidden;?width:?322px;?height:?50px”> ??
  32. ????<ul>??? ??
  33. ????????<li>aaa</li>??? ??
  34. ????????<li>bbb</li>??? ??
  35. ????????<li>ccc</li>??? ??
  36. ????????<li>ddd</li>??? ??
  37. ????????<li>eee</li>??? ??
  38. ????????<li>fff</li>??? ??
  39. ????????<li>ggg</li>??? ??
  40. ????????<li>hhh</li>??? ??
  41. ????</ul> ??
  42. </div>??? ??
  43. <script?type=“text/javascript”> ??
  44. function?next(elem){???? ??
  45. ????????do{???? ??
  46. ????????????elem=elem.nextSibling;???? ??
  47. ????????}while(elem&&elem.nodeType!=1);???? ??
  48. ????????return?elem;???? ??
  49. ????}???? ??
  50. ????//—查找第一个子元素的函数—//???? ??
  51. ????function?first(elem){???? ??
  52. ????????elem=elem.firstChild;???? ??
  53. ????????return?elem?&&?elem.nodeType!=1?next(elem):elem;???? ??
  54. ????} ??
  55. ???? ??
  56. ????var?scrollText?=?{ ??
  57. ????????init?:?function(id,?speed){ ??
  58. ????????????this.speed?=?speed?||?10; ??
  59. ????????????this.boxID?=?id; ??
  60. ????????????this.scrollBox?=?document.getElementById(id); ??
  61. ????????????this.appendBox?=?first(this.scrollBox).cloneNode(true); ??
  62. ????????????this.scrollBox.appendChild(this.appendBox); ??
  63. ????????????this.objs?=?{ ??
  64. ????????????????scrollBox?:?this.scrollBox, ??
  65. ????????????????appendBox?:?this.appendBox, ??
  66. ????????????????speed?:?this.speed, ??
  67. ????????????????id?:?this.boxID ??
  68. ????????????}; ??
  69. ????????????return?this; ??
  70. ????????}, ??
  71. ??
  72. ????????scrollUp?:?function(){ ??
  73. ????????????var?self?=?this.objs; ??
  74. ????????????self.begin?=?function(){ ??
  75. ????????????????self.doScr?=?setInterval(function(){ ??
  76. ????????????????????if(self[‘appendBox’].offsetHeight<=self[‘scrollBox’].scrollTop){ ??
  77. ????????????????????????self[‘scrollBox’].scrollTop-=first(self[‘scrollBox’]).offsetHeight; ??
  78. ????????????????????}else{ ??
  79. ????????????????????????self[‘scrollBox’].scrollTop++; ??
  80. ????????????????????} ??
  81. ????????????????},self.speed);?? ??
  82. ????????????} ??
  83. ????????????self.begin(); ??
  84. ????????????self.scrollBox.onmouseover?=?function(){ ??
  85. ????????????????clearInterval(self.doScr); ??
  86. ????????????} ??
  87. ??
  88. ????????????self.scrollBox.onmouseout?=?function(){ ??
  89. ????????????????self.begin(); ??
  90. ????????????} ??
  91. ????????} ??
  92. ??
  93. ????} ??
  94. ???? ??
  95. ????scrollText.init(‘demo’).scrollUp(); ??
  96. ????scrollText.init(‘demo2’,?50).scrollUp(); ??
  97. ???? ??
  98. </script>?? ??
  99. ???? ??
  100. ? ??
  101. </body>??? ??
  102. </html>???
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 向上无缝滚动的封装(感谢demo,BUG已修复)

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏