一个无缝滚动的封装

2009-03-26 分类：JavaScript 阅读(7828) 评论(0)

具体的方法和思路可以看上一篇日志《向上无缝滚动的封装》：https://www.html.cn/article.asp?id=577

在向上无缝滚动的封装的基础上增加了向下，向左，向右的滚动，第二个参数是top、bottom、left、right；

参看演示：https://www.html.cn/demo/Marquee/scroll_text_ok_2.html

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

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;padding:0}???? ??
  9. li{?height:25px}??? ??
  10. #demo3?ul,#demo4?ul{float:left;?width:400px;} ??
  11. #demo3?li,#demo4?li{?float:left;?width:50px}? ??
  12. —>??? ??
  13. </style>??? ??
  14. </head>??? ??
  15. ??? ??
  16. <body>? ??
  17. <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.html.cn”>www.css88.com</a></div>?? ??
  18. <p>这个是速度为10的滚动</p>??
  19. <div?id=“demo”?style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
  20. ????<ul>??? ??
  21. ????????<li>111</li>??? ??
  22. ????????<li>222</li>??? ??
  23. ????????<li>333</li>??? ??
  24. ????????<li>444</li>??? ??
  25. ????????<li>555</li>??? ??
  26. ????????<li>666</li>??? ??
  27. ????????<li>777</li>??? ??
  28. ????????<li>888</li>??? ??
  29. ????</ul>??
  30. </div>??
  31. <hr?/>??
  32. <p>这个是速度为50的向下滚动</p>??
  33. <div?id=“demo2”??style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
  34. ????<ul>??? ??
  35. ????????<li>aaa</li>??? ??
  36. ????????<li>bbb</li>??? ??
  37. ????????<li>ccc</li>??? ??
  38. ????????<li>ddd</li>??? ??
  39. ????????<li>eee</li>??? ??
  40. ????????<li>fff</li>??? ??
  41. ????????<li>ggg</li>??? ??
  42. ????????<li>hhh</li>??? ??
  43. ????</ul>??
  44. </div>? ??
  45. <hr?/>??
  46. <p>这个是速度为10的向左滚动</p>??
  47. <div?id=“demo3”?style=“overflow:?hidden;?width:?100px;?height:?25px”>??
  48. ????<ul>??? ??
  49. ????????<li>111</li>??? ??
  50. ????????<li>222</li>??? ??
  51. ????????<li>333</li>??? ??
  52. ????????<li>444</li>??? ??
  53. ????????<li>555</li>??? ??
  54. ????????<li>666</li>??? ??
  55. ????????<li>777</li>??? ??
  56. ????????<li>888</li>??? ??
  57. ????</ul>??
  58. </div>??
  59. <hr?/>??
  60. <p>这个是速度为50的向右滚动</p>??
  61. <div?id=“demo4”?style=“overflow:?hidden;?width:?100px;?height:?25px”>??
  62. ????<ul>??? ??
  63. ????????<li>aaa</li>??? ??
  64. ????????<li>bbb</li>??? ??
  65. ????????<li>ccc</li>??? ??
  66. ????????<li>ddd</li>??? ??
  67. ????????<li>eee</li>??? ??
  68. ????????<li>fff</li>??? ??
  69. ????????<li>ggg</li>??? ??
  70. ????????<li>hhh</li>??? ??
  71. ????</ul>??
  72. </div>?? ??
  73. <script?type=“text/javascript”>??
  74. function?next(elem){???? ??
  75. ????????do{???? ??
  76. ??????????? elem=elem.nextSibling;???? ??
  77. ????????}while(elem&&elem.nodeType!=1);???? ??
  78. ????????return?elem;???? ??
  79. ????}???? ??
  80. ????//—查找第一个子元素的函数—//???? ??
  81. ????function?first(elem){???? ??
  82. ??????? elem=elem.firstChild;???? ??
  83. ????????return?elem?&&?elem.nodeType!=1?next(elem):elem;???? ??
  84. ????} ??
  85. ???? ??
  86. ????var?Marquee?=?{ ??
  87. ????????init:?function(id,?toFollow,?speed){ ??
  88. ????????????this.speed?=?speed?||?10; ??
  89. ????????????this.boxID?=?id; ??
  90. ????????????this.toFollow?=?toFollow; ??
  91. ????????????this.scrollBox?=?document.getElementById(id); ??
  92. ???????????? ??
  93. ???????????? ??
  94. ????????????if?(this.toFollow?==?”top”?||?this.toFollow?==?”bottom”)?{ ??
  95. ????????????????this.appendBox?=?first(this.scrollBox).cloneNode(true); ??
  96. ????????????????this.scrollBox.appendChild(this.appendBox); ??
  97. ????????????} ??
  98. ????????????else?{ ??
  99. ????????????????var?templateLeft?=?“<table?cellspacing=’0′?cellpadding=’0′?style=’border-collapse:collapse;display:inline;’><tr><td?noWrap=true?style=’white-space:?nowrap;word-break:keep-all;’>”?+?this.scrollBox.innerHTML?+?”</td><td?noWrap=true?style=‘white-space:?nowrap;word-break:keep-all;’>“?+?this.scrollBox.innerHTML?+?”</td></tr></table>“; ??
  100. ????????????????this.scrollBox.innerHTML?=?templateLeft; ??
  101. ????????????????this.appendBox?=?first(first(first(first(this.scrollBox)))); ??
  102. ???????????????? ??
  103. ????????????} ??
  104. ????????????this.objs?=?{ ??
  105. ????????????????scrollBox:?this.scrollBox, ??
  106. ????????????????appendBox:?this.appendBox, ??
  107. ????????????????toFollow:?this.toFollow, ??
  108. ????????????????speed:?this.speed, ??
  109. ????????????????id:?this.boxID ??
  110. ????????????}; ??
  111. ????????????return?this; ??
  112. ????????}, ??
  113. ???????? ??
  114. ????????scroll:?function(){ ??
  115. ????????????var?self?=?this.objs; ??
  116. ????????????self.begin?=?function(){ ??
  117. ???????????? ??
  118. ????????????????switch?(self[‘toFollow’])?{ ??
  119. ????????????????????case?”top”: ??
  120. ????????????????????????self.doScr?=?setInterval(function(){ ??
  121. ????????????????????????????if?(self[‘appendBox’].offsetHeight?<=?self[‘scrollBox’].scrollTop)?{ ??
  122. ????????????????????????????????self[‘scrollBox’].scrollTop?–=?first(self[‘scrollBox’]).offsetHeight; ??
  123. ????????????????????????????} ??
  124. ????????????????????????????else?{ ??
  125. ????????????????????????????????self[‘scrollBox’].scrollTop++; ??
  126. ????????????????????????????} ??
  127. ????????????????????????},?self.speed); ??
  128. ????????????????????????break; ??
  129. ????????????????????case?”bottom”: ??
  130. ????????????????????????self.doScr?=?setInterval(function(){ ??
  131. ????????????????????????????if?(self[‘scrollBox’].scrollTop?<=?0)?{ ??
  132. ????????????????????????????????self[‘scrollBox’].scrollTop?=?self[‘appendBox’].offsetHeight; ??
  133. ????????????????????????????} ??
  134. ????????????????????????????else?{ ??
  135. ????????????????????????????????self[‘scrollBox’].scrollTop–; ??
  136. ????????????????????????????} ??
  137. ????????????????????????},?self.speed); ??
  138. ????????????????????????break; ??
  139. ????????????????????case?”left”: ??
  140. ????????????????????????self.doScr?=?setInterval(function(){ ??
  141. ????????????????????????????if?(self[‘appendBox’].offsetWidth?<=?self[‘scrollBox’].scrollLeft)?{ ??
  142. ????????????????????????????????self[‘scrollBox’].scrollLeft?–=?self[‘appendBox’].offsetWidth; ??
  143. ????????????????????????????} ??
  144. ????????????????????????????else?{ ??
  145. ????????????????????????????????self[‘scrollBox’].scrollLeft++; ??
  146. ????????????????????????????} ??
  147. ????????????????????????},?self.speed); ??
  148. ????????????????????????break; ??
  149. ????????????????????case?”right”: ??
  150. ????????????????????????self.doScr?=?setInterval(function(){ ??
  151. ????????????????????????????if?(self[‘scrollBox’].scrollLeft?<=?0)?{ ??
  152. ????????????????????????????????self[‘scrollBox’].scrollLeft?=?self[‘appendBox’].offsetWidth; ??
  153. ????????????????????????????} ??
  154. ????????????????????????????else?{ ??
  155. ????????????????????????????????self[‘scrollBox’].scrollLeft–; ??
  156. ????????????????????????????} ??
  157. ???????????????????????????? ??
  158. ????????????????????????},?self.speed); ??
  159. ????????????????????????break; ??
  160. ????????????????????}??? ??
  161. ????????????????} ??
  162. ????????????????self.begin(); ??
  163. ????????????????self.scrollBox.onmouseover?=?function(){ ??
  164. ????????????????????clearInterval(self.doScr); ??
  165. ????????????????} ??
  166. ???????????????? ??
  167. ????????????????self.scrollBox.onmouseout?=?function(){ ??
  168. ????????????????????self.begin(); ??
  169. ????????????????} ??
  170. ????????????} ??
  171. ???????????? ??
  172. ????????} ??
  173. ???? ??
  174. ????Marquee.init(“demo”,”top”).scroll(); ??
  175. ????Marquee.init(“demo2″,”bottom”,?50).scroll(); ??
  176. ????Marquee.init(“demo3″,”left”).scrollUp(); ??
  177. ????Marquee.init(“demo4″,”right”,?50).scroll(); ??
  178. </script>?? ??
  179. ???? ??
  180. ? ??
  181. </body>??? ??
  182. </html>??? ??
赞(0) 打赏
未经允许不得转载：WEB前端开发 » 一个无缝滚动的封装

相关推荐

评论 抢沙发

取消

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

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)前端招聘 (25)前端开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)前端开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏