实现滚动内容的代码

  

  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=""https://www.cmseasy.cn/images/logo.gif">"
     
  10. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  11. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  12. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  13. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  14. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  15. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  16. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  17. <img src=""https://www.cmseasy.cn/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. //当滚动至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)//设置定时器
     
  33. //鼠标移上时清除定时器达到滚动停止的目的
     
  34. jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
     
  35. //鼠标移开时重设定时器
     
  36. jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
     
  37. </script>
     
  38. <!--向上滚动代码结束-->
     
  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=""https://www.cmseasy.cn/images/logo.gif">"
     
  44. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  45. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  46. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  47. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  48. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  49. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  50. <img src=""https://www.cmseasy.cn/images/logo.gif">"
     
  51. <img src=""https://www.cmseasy.cn/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. <!--向下滚动代码结束-->
     
  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=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  79. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  80. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  81. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  82. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td><td><img"src=""https://www.cmseasy.cn/images/logo.gif""width="88"></td>
     
  83. <td><img src=""https://www.cmseasy.cn/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//速度数值越大速度越慢
     
  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. <!--向左滚动代码结束-->
     
  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=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  114. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  115. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  116. <td><img src=""https://www.cmseasy.cn/images/logo.gif"></td>"
     
  117. <td><img src=""https://www.cmseasy.cn/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//速度数值越大速度越慢
     
  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. <!--向右滚动代码结束-->
     
  140. <p></p>
     

  141.  
  142. </body>
     
  143. </html>
复制代码

推荐内容

婚纱影楼响应式网站模板

编号:CmsEasy_F_158

红色床品公司网站模板

编号:CmsEasy_V_224

美容美发网站模板

编号:CmsEasy_F_065

微信客服

您的建站服务专家

售前咨询
模板定制

客服 Sunny

售前问题咨询

联系客服

客服Medive

售前问题咨询

联系客服
售前咨询
功能定制

客服 Ashely

售前问题咨询

联系客服

客服Antony

售前问题咨询

联系客服