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教程