其他 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

[复制链接]
ARCHY明星会员实名认证 发表于 2012-9-6 16:44:12 [其他] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
真的很不错的,向上下左右不间断无缝滚动图片的效果(兼容火狐和IE),一般常用的4个方向都有了,而且代码比较简单,做DIY布局也很容易,收藏顺便分享下,下面只是代码,图片可以任意放一个noimg.gif即可。

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

  2. <div id="colee" style="overflow:hidden;height:253px;width:410px;">
  3. <div id="colee1">
  4. <p><img src="images/noimg.gif"></p>
  5. <p><img src="images/noimg.gif"></p>
  6. <p><img src="images/noimg.gif"></p>
  7. <p><img src="images/noimg.gif"></p>
  8. <p><img src="images/noimg.gif"></p>
  9. <p><img src="images/noimg.gif"></p>
  10. <p><img src="images/noimg.gif"></p>
  11. <p><img src="images/noimg.gif"></p>
  12. <p><img src="images/noimg.gif"></p>
  13. </div>
  14. <div id="colee2"></div>
  15. </div>
  16. <script>
  17. var speed=30;
  18. var colee2=document.getElementById("colee2");
  19. var colee1=document.getElementById("colee1");
  20. var colee=document.getElementById("colee");
  21. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
  22. function Marquee1(){
  23. //当滚动至colee1与colee2交界时
  24. if(colee2.offsetTop-colee.scrollTop<=0){
  25. colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
  26. }else{
  27. colee.scrollTop++
  28. }
  29. }
  30. var MyMar1=setInterval(Marquee1,speed)//设置定时器
  31. //鼠标移上时清除定时器达到滚动停止的目的
  32. colee.onmouseover=function() {clearInterval(MyMar1)}
  33. //鼠标移开时重设定时器
  34. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
  35. </script>

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

  37. <br>

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

  39. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
  40. <div id="colee_bottom1">
  41. <p><img src="images/noimg.gif"></p>
  42. <p><img src="images/noimg.gif"></p>
  43. <p><img src="mages/noimg.gif"></p>
  44. <p><img src="images/noimg.gif"></p>
  45. <p><img src="mages/noimg.gif"></p>
  46. <p><img src="images/noimg.gif"></p>
  47. <p><img src="images/noimg.gif"></p>
  48. <p><img src="images/noimg.gif"></p>
  49. <p><img src="images/noimg.gif"></p>
  50. </div>
  51. <div id="colee_bottom2"></div>
  52. </div>
  53. <script>
  54. var speed=30
  55. var colee_bottom2=document.getElementById("colee_bottom2");
  56. var colee_bottom1=document.getElementById("colee_bottom1");
  57. var colee_bottom=document.getElementById("colee_bottom");
  58. colee_bottom2.innerHTML=colee_bottom1.innerHTML
  59. colee_bottom.scrollTop=colee_bottom.scrollHeight
  60. function Marquee2(){
  61. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
  62. colee_bottom.scrollTop+=colee_bottom2.offsetHeight
  63. else{
  64. colee_bottom.scrollTop--
  65. }
  66. }
  67. var MyMar2=setInterval(Marquee2,speed)
  68. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
  69. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
  70. </script>

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

  72. <br>

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

  74. <div id="colee_left" style="overflow:hidden;width:500px;">
  75. <table cellpadding="0" cellspacing="0" border="0">
  76. <tr><td id="colee_left1" valign="top" align="center">
  77. <table cellpadding="2" cellspacing="0" border="0">
  78. <tr align="center">
  79. <td><p><img src="images/noimg.gif"></p></td>
  80. <td><p><img src="mages/noimg.gif"></p></td>
  81. <td><p><img src="images/noimg.gif"></p></td>
  82. <td><p><img src="mages/noimg.gif"></p></td>
  83. <td><p><img src="images/noimg.gif"></p></td>
  84. <td><p><img src="mages/noimg.gif"></p></td>
  85. <td><p><img src="images/noimg.gif"></p></td>
  86. </tr>
  87. </table>
  88. </td>
  89. <td id="colee_left2" valign="top"></td>
  90. </tr>
  91. </table>
  92. </div>
  93. <script>
  94. //使用div时,请保证colee_left2与colee_left1是在同一行上.
  95. var speed=30//速度数值越大速度越慢
  96. var colee_left2=document.getElementById("colee_left2");
  97. var colee_left1=document.getElementById("colee_left1");
  98. var colee_left=document.getElementById("colee_left");
  99. colee_left2.innerHTML=colee_left1.innerHTML
  100. function Marquee3(){
  101. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
  102. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
  103. else{
  104. colee_left.scrollLeft++
  105. }
  106. }
  107. var MyMar3=setInterval(Marquee3,speed)
  108. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  109. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  110. </script>

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


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

  113. <div id="colee_right" style="overflow:hidden;width:500px;">
  114. <table cellpadding="0" cellspacing="0" border="0">
  115. <tr><td id="colee_right1" valign="top" align="center">
  116. <table cellpadding="2" cellspacing="0" border="0">
  117. <tr align="center">
  118. <td><p><img src="images/noimg.gif"></p></td>
  119. <td><p><img src="images/noimg.gif"></p></td>
  120. <td><p><img src="images/noimg.gif"></p></td>
  121. <td><p><img src="images/noimg.gif"></p></td>
  122. <td><p><img src="images/noimg.gif"></p></td>
  123. </tr>
  124. </table>
  125. </td>
  126. <td id="colee_right2" valign="top"></td>
  127. </tr>
  128. </table>
  129. </div>
  130. <script>
  131. var speed=30//速度数值越大速度越慢
  132. var colee_right2=document.getElementById("colee_right2");
  133. var colee_right1=document.getElementById("colee_right1");
  134. var colee_right=document.getElementById("colee_right");
  135. colee_right2.innerHTML=colee_right1.innerHTML
  136. function Marquee4(){
  137. if(colee_right.scrollLeft<=0)
  138. colee_right.scrollLeft+=colee_right2.offsetWidth
  139. else{
  140. colee_right.scrollLeft--
  141. }
  142. }
  143. var MyMar4=setInterval(Marquee4,speed)
  144. colee_right.onmouseover=function() {clearInterval(MyMar4)}
  145. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
  146. </script>

  147. <!--向右滚动代码结束-->
复制代码




上一篇:站帮网大讲堂 第六期 Discuz论坛SEO优化的技巧 9月9号
下一篇:百度搜索引擎优化指南2.0[官方版]下载

大神点评1

絕版BE 发表于 2012-9-6 17:50:33 [其他] 显示全部楼层
不错,支持
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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