javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

WBOY

Lepaskan： 2016-05-16 19:04:36

asal

1238 orang telah melayarinya

学习中...本段JS制作参考 MSClass.js

boxmove(d1,d2,d3,e,obj)  
d1 = 外围容器  
d2 = 内容  
d3 = 复制d2的内容接替循环滚动  
e   = 方向与方法  
   1,2,3,4 = 自动滚动，分别对应：上,右,下,左  
   "top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左  
    obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。

<h2>向上</h2> 
<div id="a" style="overflow:hidden;height:100px;width:90px;">  
<div id="a1">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">   
</div>  
<div id="a2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("a","a1","a2",1); 
</script>

<h2>向右</h2> 
<div id="b" style="overflow:hidden;height:100px;width:90px;">  
<div id="b1"> 
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">   
</div>  
<div id="b2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("b","b1","b2",2); 
</script>

<h2>向下</h2> 
<div id="c" style="overflow:hidden;height:100px;width:90px;">  
<div id="c1">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">   
</div>  
<div id="c2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("c","c1","c2",3); 
</script>

<h2>向左</h2> 
<div id="d" style="overflow:hidden;height:100px;width:90px;">  
<div id="d1">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">  
<img src="http://www.jb51.net/images/logo.gif" alt="">   
</div>  
<div id="d2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("d","d1","d2",4); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]