职业IT人论坛

 找回密码
 注册

扫一扫,访问微社区

搜索
2019PMP认证备考培训项目管理之家专场百度自然排名1-15天上首页,达标计费,无效退款.500+微信公众号程序模块,免费使用!
查看: 1263|回复: 1

JS实现图片无间隙滚动代码(IE,FF兼容)

[复制链接]
joe 发表于 2012-5-26 11:00 | 显示全部楼层 |阅读模式
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

注意如果是放在smart模板里面,请将javascript代码放到js文件里面加载。
  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=gb2312" />
  5. <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
  6. </head>
  7. <body>
  8. <div id="colee" style="overflow:hidden;height:253px;width:410px;">
  9. <div id="colee1">
  10. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  11. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  12. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  13. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  14. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  15. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  16. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  17. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  18. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  19. </div>
  20. <div id="colee2"></div>
  21. </div>
  22. <script>
  23. var speed=30;
  24. var colee2=document.getElementById("colee2");
  25. var colee1=document.getElementById("colee1");
  26. var colee=document.getElementById("colee");
  27. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
  28. function Marquee1(){
  29. //当滚动至colee1与colee2交界时
  30. if(colee2.offsetTop-colee.scrollTop<=0){
  31. colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
  32. }else{
  33. colee.scrollTop++
  34. }
  35. }
  36. var MyMar1=setInterval(Marquee1,speed)//设置定时器
  37. //鼠标移上时清除定时器达到滚动停止的目的
  38. colee.onmouseover=function() {clearInterval(MyMar1)}
  39. //鼠标移开时重设定时器
  40. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
  41. </script>

  42. <!--向上滚动代码结束-->

  43. <br>

  44. <!--下面是向下滚动代码-->

  45. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
  46. <div id="colee_bottom1">
  47. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  48. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  49. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  50. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  51. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  52. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  53. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  54. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  55. <p><img src="http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p>
  56. </div>
  57. <div id="colee_bottom2"></div>
  58. </div>
  59. <script>
  60. var speed=30
  61. var colee_bottom2=document.getElementById("colee_bottom2");
  62. var colee_bottom1=document.getElementById("colee_bottom1");
  63. var colee_bottom=document.getElementById("colee_bottom");
  64. colee_bottom2.innerHTML=colee_bottom1.innerHTML
  65. colee_bottom.scrollTop=colee_bottom.scrollHeight
  66. function Marquee2(){
  67. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
  68. colee_bottom.scrollTop+=colee_bottom2.offsetHeight
  69. else{
  70. colee_bottom.scrollTop--
  71. }
  72. }
  73. var MyMar2=setInterval(Marquee2,speed)
  74. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
  75. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
  76. </script>

  77. <!--向下滚动代码结束-->

  78. <br>

  79. <!--下面是向左滚动代码-->

  80. <div id="colee_left" style="overflow:hidden;width:500px;">
  81. <table cellpadding="0" cellspacing="0" border="0">
  82. <tr><td id="colee_left1" valign="top" align="center">
  83. <table cellpadding="2" cellspacing="0" border="0">
  84. <tr align="center">
  85. <td><p><img src="

  86. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  87. <td><p><img src="



  88. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  89. <td><p><img src="



  90. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  91. <td><p><img src="



  92. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  93. <td><p><img src="



  94. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  95. <td><p><img src="



  96. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  97. <td><p><img src="



  98. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  99. </tr>
  100. </table>
  101. </td>
  102. <td id="colee_left2" valign="top"></td>
  103. </tr>
  104. </table>
  105. </div>
  106. <script>
  107. //使用div时,请保证colee_left2与colee_left1是在同一行上.
  108. var speed=30//速度数值越大速度越慢
  109. var colee_left2=document.getElementById("colee_left2");
  110. var colee_left1=document.getElementById("colee_left1");
  111. var colee_left=document.getElementById("colee_left");
  112. colee_left2.innerHTML=colee_left1.innerHTML
  113. function Marquee3(){
  114. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
  115. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
  116. else{
  117. colee_left.scrollLeft++
  118. }



  119. }
  120. var MyMar3=setInterval(Marquee3,speed)
  121. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  122. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  123. </script>

  124. <!--向左滚动代码结束-->

  125. <br>

  126. <!--下面是向右滚动代码-->

  127. <div id="colee_right" style="overflow:hidden;width:500px;">
  128. <table cellpadding="0" cellspacing="0" border="0">
  129. <tr><td id="colee_right1" valign="top" align="center">
  130. <table cellpadding="2" cellspacing="0" border="0">
  131. <tr align="center">
  132. <td><p><img src="

  133. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  134. <td><p><img src="



  135. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  136. <td><p><img src="



  137. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  138. <td><p><img src="



  139. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  140. <td><p><img src="



  141. http://www.51myit.com/template/comiis_dzx25csmf/css/comiis/logo_sc_s.png"></p></td>
  142. </tr>
  143. </table>
  144. </td>
  145. <td id="colee_right2" valign="top"></td>
  146. </tr>
  147. </table>
  148. </div>
  149. <script>
  150. var speed=30//速度数值越大速度越慢
  151. var colee_right2=document.getElementById("colee_right2");
  152. var colee_right1=document.getElementById("colee_right1");
  153. var colee_right=document.getElementById("colee_right");
  154. colee_right2.innerHTML=colee_right1.innerHTML
  155. function Marquee4(){
  156. if(colee_right.scrollLeft<=0)
  157. colee_right.scrollLeft+=colee_right2.offsetWidth
  158. else{
  159. colee_right.scrollLeft--
  160. }
  161. }
  162. var MyMar4=setInterval(Marquee4,speed)
  163. colee_right.onmouseover=function() {clearInterval(MyMar4)}
  164. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
  165. </script>



  166. <!--向右滚动代码结束-->
  167. </body>
  168. </html>

复制代码
haomeng123 发表于 2012-8-9 13:26 | 显示全部楼层
{:soso__17882815720064749887_1:}
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|手机版|网站帮助|职业IT人 ( 粤ICP备12053935号 )

GMT+8, 2019-3-21 13:46 , Processed in 0.079974 second(s), 25 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2018 Comsenz Inc.

快速回复 返回顶部 返回列表