네 방향의 스크롤을 수집하고 정리합니다_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> <p> </p>
[Ctrl A select all 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]

아래로 스크롤

<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> <p> </p>
[Ctrl A select all 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

왼쪽으로 스크롤

<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> <p> </p>

[Ctrl A select all 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]

오른쪽으로 스크롤<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> <p> </p>

[Ctrl A select all 참고: <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>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <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>