js左右上下滚动代码

注：上下滚动时，单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动
       左右滚动时，单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动
一、上下滚动

1.显示的内容

<div id="demo" style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 100px; "> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="demo1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0"> <tr> <td>一</td> </tr> <tr> <td>二</td> </tr> <tr> <td>三</td> </tr> </table></td> </tr> <tr> <td id="demo2"></td> </tr> </table> </div>

2.向上滚动JS

<SCRIPT> var speed=30 var MyMarh=setInterval(Marqueeh,speed) demo2.innerHTML=demo1.innerHTML //原理是不断的向demoh2中填入demoh1中的内容，然后将已经看不见的清除 //用一个两行一列的表格，上一列再放一个装填有内容的表格，定义为demoh1，下一列是空的TD，定义为demoh2 //SPEED是用来控制速度的。 demo.οnmοuseοver=function(){ clearInterval(MyMarh) } demo.οnmοuseοut=function(){ MyMarh=setInterval(Marqueeh,speed) } function Marqueeh(){ if(demo2.offsetHeight-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } </SCRIPT>

3.向下滚动JS

<mce:script type="text/javascript"><!-- var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } // --></mce:script>  

 

二、左右滚动

1.显示内容

<div id="demo" style="overflow:hidden;height:100px;width:200px;"> <table cellpadding="0" cellspace="0" border="0"> <tr> <td id="demo1"><table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td>一</td> <td>二</td> <td>三</td> </tr> </table></td> <td id="demo2"></td> </tr> </table> </div>

2.向左滚动JS

<mce:script type="text/javascript"><!-- var speed=30 var MyMar=setInterval(Marquee,speed) demo2.innerHTML=demo1.innerHTML demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } // --></mce:script> 

3.向右滚动JS

 

 <mce:script type="text/javascript"><!-- var speed=30 var MyMar=setInterval(Marquee,speed) demo2.innerHTML=demo1.innerHTML demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } // --></mce:script>