JS不间断无缝滚动 (兼容火狐和IE)

时间  2020-04-23
标签 不间断 无缝 滚动 兼容 火狐 栏目 JavaScript 繁體版
原文   原文链接

 Html代码 复制代码 收藏代码html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)/title>
  7. </head>
  8. <body>
  9. <div id="colee" style="overflow:hidden;height:253px;width:410px;">
  10. <div id="colee1">
  11. <p><img src="oyzd.img"></p>
  12. <p><img src="oyzd.img"></p>
  13. <p><img src="oyzd.img"></p>
  14. <p><img src="oyzd.img"></p>
  15. <p><img src="oyzd.img"></p>
  16. <p><img src="oyzd.img"></p>
  17. <p><img src="oyzd.img"></p>
  18. <p><img src="oyzd.img"></p>
  19. <p><img src="oyzd.img"></p>
  20. </div>
  21. <div id="colee2"></div>
  22. </div>
  23. <script>
  24. var speed=30;
  25. var colee2=document.getElementById("colee2");
  26. var colee1=document.getElementById("colee1");
  27. var colee=document.getElementById("colee");
  28. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
  29. function Marquee1(){
  30. //当滚动至colee1与colee2交界时
  31. if(colee2.offsetTop-colee.scrollTop<=0){
  32. colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
  33. }else{
  34. colee.scrollTop++
  35. }
  36. }
  37. var MyMar1=setInterval(Marquee1,speed)//设置定时器
  38. //鼠标移上时清除定时器达到滚动中止的目的
  39. colee.onmouseover=function() {clearInterval(MyMar1)}
  40. //鼠标移开时重设定时器
  41. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
  42. </script>
  43. <!--向上滚动代码结束-->
  44. <br>
  45. <!--下面是向下滚动代码-->
  46. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
  47. <div id="colee_bottom1">
  48. <p><img src="oyzd.img"></p>
  49. <p><img src="oyzd.img"></p>
  50. <p><img src="oyzd.img"></p>
  51. <p><img src="oyzd.img"></p>
  52. <p><img src="oyzd.img"></p>
  53. <p><img src="oyzd.img"></p>
  54. <p><img src="oyzd.img"></p>
  55. <p><img src="oyzd.img"></p>
  56. <p><img src="oyzd.img"></p>
  57. </div>
  58. <div id="colee_bottom2"></div>
  59. </div>
  60. <script>
  61. var speed=30
  62. var colee_bottom2=document.getElementById("colee_bottom2");
  63. var colee_bottom1=document.getElementById("colee_bottom1");
  64. var colee_bottom=document.getElementById("colee_bottom");
  65. colee_bottom2.innerHTML=colee_bottom1.innerHTML
  66. colee_bottomcolee_bottom.scrollTop=colee_bottom.scrollHeight
  67. function Marquee2(){
  68. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
  69. colee_bottom.scrollTop+=colee_bottom2.offsetHeight
  70. else{
  71. colee_bottom.scrollTop--
  72. }
  73. }
  74. var MyMar2=setInterval(Marquee2,speed)
  75. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
  76. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
  77. </script>
  78. <!--向下滚动代码结束-->
  79. <br>
  80. <!--下面是向左滚动代码-->
  81. <div id="colee_left" style="overflow:hidden;width:500px;">
  82. <table cellpadding="0" cellspacing="0" border="0">
  83. <tr><td id="colee_left1" valign="top" align="center">
  84. <table cellpadding="2" cellspacing="0" border="0">
  85. <tr align="center">
  86. <td><p><img src="oyzd.img"></p></td>
  87. <td><p><img src="oyzd.img"></p></td>
  88. <td><p><img src="oyzd.img"></p></td>
  89. <td><p><img src="oyzd.img"></p></td>
  90. <td><p><img src="oyzd.img"></p></td>
  91. <td><p><img src="oyzd.img"></p></td>
  92. <td><p><img src="oyzd.img"></p></td>
  93. </tr>
  94. </table>
  95. </td>
  96. <td id="colee_left2" valign="top"></td>
  97. </tr>
  98. </table>
  99. </div>
  100. <script>
  101. <!--oyzd-->
  102. //使用div时，请保证colee_left2与colee_left1是在同一行上.
  103. var speed=30//速度数值越大速度越慢
  104. var colee_left2=document.getElementById("colee_left2");
  105. var colee_left1=document.getElementById("colee_left1");
  106. var colee_left=document.getElementById("colee_left");
  107. colee_left2.innerHTML=colee_left1.innerHTML
  108. function Marquee3(){
  109. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
  110. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
  111. else{
  112. colee_left.scrollLeft++
  113. }
  114. }
  115. var MyMar3=setInterval(Marquee3,speed)
  116. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  117. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  118. </script>
  119. <!--向左滚动代码结束-->
  120. <br>
  121. <!--下面是向右滚动代码-->
  122. <div id="colee_right" style="overflow:hidden;width:500px;">
  123. <table cellpadding="0" cellspacing="0" border="0">
  124. <tr><td id="colee_right1" valign="top" align="center">
  125. <table cellpadding="2" cellspacing="0" border="0">
  126. <tr align="center">
  127. <td><p><img src="oyzd.img"></p></td>
  128. <td><p><img src="oyzd.img"></p></td>
  129. <td><p><img src="oyzd.img"></p></td>
  130. <td><p><img src="oyzd.img"></p></td>
  131. <td><p><img src="oyzd.img"></p></td>
  132. </tr>
  133. </table>
  134. </td>
  135. <td id="colee_right2" valign="top"></td>
  136. </tr>
  137. </table>
  138. </div>
  139. <script>
  140. var speed=30//速度数值越大速度越慢
  141. var colee_right2=document.getElementById("colee_right2");
  142. var colee_right1=document.getElementById("colee_right1");
  143. var colee_right=document.getElementById("colee_right");
  144. colee_right2.innerHTML=colee_right1.innerHTML
  145. function Marquee4(){
  146. if(colee_right.scrollLeft<=0)
  147. colee_right.scrollLeft+=colee_right2.offsetWidth
  148. else{
  149. colee_right.scrollLeft--
  150. }
  151. }
  152. var MyMar4=setInterval(Marquee4,speed)
  153. colee_right.onmouseover=function() {clearInterval(MyMar4)}
  154. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
  155. </script>
  156. <!--向右滚动代码结束-->
  157. </body>
  158. </html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程