收集整理的四个方向的滚动_JavaScript

向上滚动

<p></p> <div id="demo" style="overflow:hidden;height:100;width:90;" background:> <div id="demo1"> <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > </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> <p></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

向下滚动

<p> </p> <div id="demo" style="overflow:hidden;height:100;width:90;" background:> <div id="demo1"> <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="收集整理的四个方向的滚动_JavaScript" > </div> <div id="demo2"></div> </div> <script> 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> <p></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

向左滚动

<p></p> <div id="demo" style="overflow:hidden;width:670px;color:#ffffff;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="demo1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script> var speed=1//速度数值越大速度越慢 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> <p></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

向右滚动

<p></p> <div id="demo" style="overflow:hidden;width:670px;color:#ffffff;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="demo1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="收集整理的四个方向的滚动_JavaScript" ></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script> var speed=1//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML 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> <p></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]