Welcome to Delicate template
Header
Just another WordPress site
Header

js控制滚动代码

12月 8th, 2010 | Posted by 无 名 in js

常用js控制滚动代码,从网上收集,以供参考之用。

从右往左滚动代码:

<div id="demo" style="overflow:hidden;height:100px;width:300px;"><table align="left"
cellpadding="0" cellspace="0" border="0"><tr><td id="demo1" valign="top"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"></td><td id="demo2" valign="top"></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

从下往上滚动代码:

<div id="demo" style="overflow:hidden;height:100px;width:88px;">  
<div id="demo1">  
123 <br>
456   <br>
789 <br>
012   <br>
345 <br>
678<br>
901   <br>
234 <br>
567<br>
890 <br>
abc   <br>
def   <br>
ghi   <br>
lmn   <br>
opq   <br>
rst   <br>
uvw <br>
</div>  
<div id="demo2"></div>  
</div>  
<script>  
    var speed=30  
    demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2  
    function Marquee(){  
//当滚动至demo1与demo2交界时  
if(demo2.offsetTop-demo.scrollTop<=0)    
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端  
else{  
demo.scrollTop++  
    }  
    }  
    var MyMar=setInterval(Marquee,speed)//设置定时器  
//鼠标移上时清除定时器达到滚动停止的目的  
    demo.onmouseover=function() {clearInterval(MyMar)}  
//鼠标移开时重设定时器  
    demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}  
</script> 

从左往右滚动代码:

<div id="demo" style="overflow:hidden;height:100px;width:300px;"><table align="left" cellpadding="0" cellspace="0" border="0"><tr><td id="demo1" valign="top"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"><img src="http://www.baidu.com/img/baidu_logo.gif"></td><td id="demo2" valign="top"></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

从上往下滚动代码:

<div id="demo" style="overflow:hidden; width:128px; height:300px;">
<div id="demo1">
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
<img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br><img src="http://www.baidu.com/img/baidu_logo.gif"><br>
</div>
<div id="demo2"></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

You can follow any responses to this entry through the RSS 2.0 Both comments and pings are currently closed.