Collect and organize scrolling in four directions_JavaScript

Scroll up

<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="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > </div> <div id="demo2"></div> </div> <p> </p>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

Scroll down

<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="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > <img src="http://www.jb51.net/logos.gif" alt="Collect and organize scrolling in four directions_JavaScript" > </div> <div id="demo2"> </div> </div> <p> </p>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]

Scroll left

<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="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> </tr> </table> </td> <td id="demo2" valign="top"> </td> </tr> </table> </div> <p> </p>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

Scroll right<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="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> <td><img src="http://www.jb51.net/logos.gif" style="max-width:90%" alt="Collect and organize scrolling in four directions_JavaScript" ></td> </tr> </table> </td> <td id="demo2" valign="top"> </td> </tr> </table></div> <p> </p>

[Ctrl A select all Note: <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>If you need to introduce external Js, you need to refresh to execute <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>]<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><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>