常用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>


