實現(xiàn)滾動內(nèi)容的代碼

  小 中 大

  1. <html xmlns="http://www.w3.org/1999/xhtml">
     
  2. <head>
     
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     
  4. <title>向上下左右不間斷無縫滾動圖片的效果（兼容火狐和IE）</title>
     
  5. </head>
     
  6. <body><!--下面是向上滾動代碼-->
     
  7. <div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
     
  8. <div id=jsweb8_cn_top1>
     
  9. <img src=""http://www.ssey.top/images/logo.gif">"
     
  10. <img src=""http://www.ssey.top/images/logo.gif">"
     
  11. <img src=""http://www.ssey.top/images/logo.gif">"
     
  12. <img src=""http://www.ssey.top/images/logo.gif">"
     
  13. <img src=""http://www.ssey.top/images/logo.gif">"
     
  14. <img src=""http://www.ssey.top/images/logo.gif">"
     
  15. <img src=""http://www.ssey.top/images/logo.gif">"
     
  16. <img src=""http://www.ssey.top/images/logo.gif">"
     
  17. <img src=""http://www.ssey.top/images/logo.gif">"
     
  18. </div>
     
  19. <div id=jsweb8_cn_top2></div>
     
  20. </div>
     
  21. <script>
     
  22. var speed=30
     
  23. jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1為jsweb8_cn_top2
     
  24. function Marquee1(){
     
  25. //當(dāng)滾動至jsweb8_cn_top1與jsweb8_cn_top2交界時
     
  26. if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)   
     
  27. jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到頂端
     
  28. else{
     
  29. jsweb8_cn_top.scrollTop++;
     
  30. }
     
  31. }
     
  32. var MyMar1=setInterval(Marquee1,speed)//設(shè)置定時器
     
  33. //鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
     
  34. jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
     
  35. //鼠標(biāo)移開時重設(shè)定時器
     
  36. jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
     
  37. </script>
     
  38. <!--向上滾動代碼結(jié)束-->
     
  39. <br>
     
  40. <!--下面是向下滾動代碼-->
     
  41. <div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;>
     
  42. <div id=jsweb8_cn_bottom1>
     
  43. <img src=""http://www.ssey.top/images/logo.gif">"
     
  44. <img src=""http://www.ssey.top/images/logo.gif">"
     
  45. <img src=""http://www.ssey.top/images/logo.gif">"
     
  46. <img src=""http://www.ssey.top/images/logo.gif">"
     
  47. <img src=""http://www.ssey.top/images/logo.gif">"
     
  48. <img src=""http://www.ssey.top/images/logo.gif">"
     
  49. <img src=""http://www.ssey.top/images/logo.gif">"
     
  50. <img src=""http://www.ssey.top/images/logo.gif">"
     
  51. <img src=""http://www.ssey.top/images/logo.gif">"
     
  52. </div>
     
  53. <div id=jsweb8_cn_bottom2></div>
     
  54. </div>
     
  55. <script>
     
  56. var speed=30
     
  57. jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
     
  58. jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
     
  59. function Marquee2(){
     
  60. if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
     
  61. jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
     
  62. else{
     
  63. jsweb8_cn_bottom.scrollTop--
     
  64. }
     
  65. }
     
  66. var MyMar2=setInterval(Marquee2,speed)
     
  67. jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
     
  68. jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
     
  69. </script>
     
  70. <!--向下滾動代碼結(jié)束-->
     
  71. <br>
     
  72. <!--下面是向左滾動代碼-->
     
  73. <div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
     
  74. <table cellpadding="0" cellspacing="0" border="0">
     
  75. <tr><td id="jsweb8_cn_left1" valign="top" align="center">
     
  76. <table cellpadding="2" cellspacing="0" border="0">
     
  77. <tr align="center">
     
  78. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  79. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  80. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  81. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  82. <td><img src=""http://www.ssey.top/images/logo.gif"></td><td><img"src=""http://www.ssey.top/images/logo.gif""width="88"></td>
     
  83. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  84. </tr>
     
  85. </table>
     
  86. </td>
     
  87. <td id="jsweb8_cn_left2" valign="top"></td>
     
  88. </tr>
     
  89. </table>
     
  90. </div>
     
  91. <script>
     
  92. var speed=30//速度數(shù)值越大速度越慢
     
  93. jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
     
  94. function Marquee3(){
     
  95. if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
     
  96. jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
     
  97. else{
     
  98. jsweb8_cn_left.scrollLeft++
     
  99. }
     
  100. }
     
  101. var MyMar3=setInterval(Marquee3,speed)
     
  102. jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
     
  103. jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
     
  104. </script>
     
  105. <!--向左滾動代碼結(jié)束-->
     
  106. <br>
     
  107. <!--下面是向右滾動代碼-->
     
  108. <div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
     
  109. <table cellpadding="0" cellspacing="0" border="0">
     
  110. <tr><td id="jsweb8_cn_right1" valign="top" align="center">
     
  111. <table cellpadding="2" cellspacing="0" border="0">
     
  112. <tr align="center">
     
  113. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  114. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  115. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  116. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  117. <td><img src=""http://www.ssey.top/images/logo.gif"></td>"
     
  118. </tr>
     
  119. </table>
     
  120. </td>
     
  121. <td id="jsweb8_cn_right2" valign="top"></td>
     
  122. </tr>
     
  123. </table>
     
  124. </div>
     
  125. <script>
     
  126. var speed=30//速度數(shù)值越大速度越慢
     
  127. jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
     
  128. function Marquee4(){
     
  129. if(jsweb8_cn_right.scrollLeft<=0)
     
  130. jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
     
  131. else{
     
  132. jsweb8_cn_right.scrollLeft--
     
  133. }
     
  134. }
     
  135. var MyMar4=setInterval(Marquee4,speed)
     
  136. jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
     
  137. jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
     
  138. </script>
     
  139. <!--向右滾動代碼結(jié)束-->
     
  140. <p></p>
     

  141.  
  142. </body>
     
  143. </html>
復(fù)制代碼