设为首页收藏本站
切换到宽版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
江阴论坛»江阴论坛 › 兴趣圈子 › 建站交流 › javascript四个方向无间隙滚动合集(多浏览器IE,firefox ...
积分等级发帖收益的说明江阴论坛帮助汇总江阴论坛管理规则(必看)江阴论坛版主招聘中江阴论坛已运行 天
返回列表 发新帖
查看: 1330|回复: 0

[技术分享] javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

[复制链接]
发表于 2010-5-13 08:25:48 | 显示全部楼层 |阅读模式
  1. boxmove(d1,d2,d3,e,obj)
  2. d1 = 外围容器
  3. d2 = 内容
  4. d3 = 复制d2的内容接替循环滚动
  5. e = 方向与方法
  6. 1,2,3,4 = 自动滚动，分别对应：上,右,下,左
  7. "top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左
  8. obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="keywords" content="江阴在线,江阴论坛,暨阳社区,江阴精品论坛,江阴社区" />
  6. <meta name="description" content="江阴论坛 江阴地区健康和谐积极向上的交流论坛" />
  7. <meta name="Author" content="ray1980" />
  8. <meta name="Copyright" content="江阴论坛-JYRJ.NET. All Rights Reserved" />
  9. <title>滚动合集 - 江阴论坛-JYRJ.NET</title>
  10. <script type="text/javascript">
  11. // 自动滚动
  12. function boxmove(d1,d2,d3,e,obj){
  13.     var speed=30;
  14.     var demo=document.getElementById(d1);  
  15.     var demo1=document.getElementById(d2);  
  16.     var demo2=document.getElementById(d3);
  17.     demo2.innerHTML=demo1.innerHTML;
  18.     function boxTop(){
  19.             if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
  20.             else{demo.scrollTop++}
  21.         }
  22.     function boxRight(){
  23.             if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
  24.             else{demo.scrollLeft--}
  25.         }
  26.     function boxBottom(){  
  27.             if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
  28.             else{demo.scrollTop--}
  29.         }
  30.     function boxLeft(){
  31.             if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
  32.             else{demo.scrollLeft++}
  33.         }
  34.     if(e==1){
  35.             var MoveTop=setInterval(boxTop,speed);
  36.             demo.onmouseover=function(){clearInterval(MoveTop);}
  37.             demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
  38.         }
  39.     if(e==2){
  40.             var MoveRight=setInterval(boxRight,speed);
  41.             demo.onmouseover=function(){clearInterval(MoveRight)}
  42.             demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
  43.         }
  44.     if(e==3){
  45.             var MoveBottom=setInterval(boxBottom,speed);
  46.             demo.onmouseover=function(){clearInterval(MoveBottom);}
  47.             demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
  48.         }
  49.     if(e==4){
  50.             var MoveLeft=setInterval(boxLeft,speed)
  51.             demo.onmouseover=function(){clearInterval(MoveLeft)}
  52.             demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
  53.         }
  54.     if(e=="top"){
  55.             MoveTop=setInterval(boxTop,speed)
  56.             obj.onmouseout=function(){clearInterval(MoveTop);}
  57.         }
  58.     if(e=="right"){
  59.             MoveRight=setInterval(boxRight,speed)
  60.             obj.onmouseout=function(){clearInterval(MoveRight);}
  61.         }
  62.     if(e=="bottom"){
  63.             MoveBottom=setInterval(boxBottom,speed)
  64.             obj.onmouseout=function(){clearInterval(MoveBottom);}
  65.         }
  66.     if(e=="left"){
  67.             MoveLeft=setInterval(boxLeft,speed)
  68.             obj.onmouseout=function(){clearInterval(MoveLeft);}
  69.         }
  70.     }     
  71. </script>
  72. <style type="text/css">
  73. div#a,div#b,div#c,div#d { float:left;}
  74. h2 { clear:both; }
  75. div#b,div#d,div#bb { white-space:nowrap; }
  76. </style>
  77. </head>
  78. <body>
  79. <h1>滚动合集</h1>
  80. <hr />

  82. <h2>向上</h2>
  83. <div id="a" style="overflow:hidden;height:100px;width:90px;">  
  84. <div id="a1">  
  85. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  86. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  87. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  88. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  89. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  90. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  91. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  92. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  93. </div>  
  94. <div id="a2"></div>
  95. </div>  
  96. <script type="text/javascript">
  97. boxmove("a","a1","a2",1);
  98. </script>


  101. <h2>向右</h2>
  102. <div id="b" style="overflow:hidden;height:100px;width:90px;">  
  103. <div id="b1">
  104. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  105. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  106. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  107. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  108. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  109. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  110. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  111. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  112. </div>  
  113. <div id="b2"></div>
  114. </div>  
  115. <script type="text/javascript">
  116. boxmove("b","b1","b2",2);
  117. </script>

  119. <h2>向下</h2>
  120. <div id="c" style="overflow:hidden;height:100px;width:90px;">  
  121. <div id="c1">  
  122. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  123. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  124. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  125. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  126. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  127. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  128. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  129. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  130. </div>  
  131. <div id="c2"></div>
  132. </div>  
  133. <script type="text/javascript">
  134. boxmove("c","c1","c2",3);
  135. </script>

  137. <h2>向左</h2>
  138. <div id="d" style="overflow:hidden;height:100px;width:90px;">  
  139. <div id="d1">  
  140. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  141. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  142. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  143. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  144. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  145. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  146. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  147. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  148. </div>  
  149. <div id="d2"></div>
  150. </div>  
  151. <script type="text/javascript">
  152. boxmove("d","d1","d2",4);
  153. </script>

  155. <h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
  156. <div id="aa" style="overflow:hidden;height:100px;width:90px;">  
  157. <div id="aa1">  
  158. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  159. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  160. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  161. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  162. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  163. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  164. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  165. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  166. </div>  
  167. <div id="aa2"></div>
  168. </div>  

  170. <h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
  171. <div id="bb" style="overflow:hidden;height:100px;width:90px;">  
  172. <div id="bb1">  
  173. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  174. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  175. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  176. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  177. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  178. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  179. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />  
  180. <img src="http://bbs.jyrj.net/images/logo.gif" alt="" />   
  181. </div>  
  182. <div id="bb2"></div>
  183. </div>

  185. </body>
  186. </html>
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|江阴人家

GMT+8, 2024-11-24 01:36 , Processed in 0.331032 second(s), 16 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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