Home >Web Front-end >JS Tutorial >JavaScript four-direction gapless scrolling collection (multi-browser IE, firefox compatible)_Typical special effects

JavaScript four-direction gapless scrolling collection (multi-browser IE, firefox compatible)_Typical special effects

WBOYOriginal: 2016-05-16 19:04:361233browse

Learning... This section of JS production reference MSClass.js

Copy code The code is as follows:

boxmove(d1,d2,d3,e,obj) 
d1 = Peripheral container 
d2 = Content 
d3 = Copy the content of d2 to replace the circular scrolling 
e = Direction and method 
 1 ,2,3,4 = Automatic scrolling, corresponding to: top, right, bottom, left respectively 
 "top", "right", "bottom", "left" = Manual scrolling, corresponding to: top, right, bottom ,Left 
 obj = Set to this when manual scrolling is selected, used for event binding operations. No settings are required for automatic scrolling. 

<h1>
</h1>Scrolling Collection<hr>
<h2>

</h2>Up<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
</div>
<div id="a2">
</div>
</div>
<h2>
</h2>

<div id="b" style="overflow:hidden;height:100px;width:90px;">Right<div id="b1">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
</div>
<div id="b2">
</div>
</div>
<h2>
</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">

</h2>Manual scrolling - <div id="aa" style="overflow:hidden;height:100px;width:90px;">Up<div id="aa1"> <img src="http://www.jb51.net/images/logo.gif" alt="">Down<img src="http://www.jb51.net/images/logo.gif" alt=""><img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
</div>
<div id="aa2">
</div>
</div>
<script type="text/javascript"> 
// 自动滚动 
function boxmove(d1,d2,d3,e,obj){ 
    var speed=30; 
    var demo=document.getElementById(d1);  
    var demo1=document.getElementById(d2);  
    var demo2=document.getElementById(d3); 
    demo2.innerHTML=demo1.innerHTML; 
    function boxTop(){ 
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight} 
            else{demo.scrollTop++} 
        } 
    function boxRight(){ 
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth} 
            else{demo.scrollLeft--} 
        } 
    function boxBottom(){  
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight} 
            else{demo.scrollTop--} 
        } 
    function boxLeft(){ 
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth} 
            else{demo.scrollLeft++} 
        } 
    if(e==1){ 
            var MoveTop=setInterval(boxTop,speed); 
            demo.onmouseover=function(){clearInterval(MoveTop);} 
            demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)} 
        } 
    if(e==2){ 
            var MoveRight=setInterval(boxRight,speed); 
            demo.onmouseover=function(){clearInterval(MoveRight)} 
            demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)} 
        } 
    if(e==3){ 
            var MoveBottom=setInterval(boxBottom,speed); 
            demo.onmouseover=function(){clearInterval(MoveBottom);} 
            demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} 
        } 
    if(e==4){ 
            var MoveLeft=setInterval(boxLeft,speed) 
            demo.onmouseover=function(){clearInterval(MoveLeft)} 
            demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)} 
        } 
    if(e=="top"){ 
            MoveTop=setInterval(boxTop,speed) 
            obj.onmouseout=function(){clearInterval(MoveTop);} 
        } 
    if(e=="right"){ 
            MoveRight=setInterval(boxRight,speed) 
            obj.onmouseout=function(){clearInterval(MoveRight);} 
        } 
    if(e=="bottom"){ 
            MoveBottom=setInterval(boxBottom,speed) 
            obj.onmouseout=function(){clearInterval(MoveBottom);} 
        } 
    if(e=="left"){ 
            MoveLeft=setInterval(boxLeft,speed) 
            obj.onmouseout=function(){clearInterval(MoveLeft);} 
        } 
    }     
</script>
<script type="text/javascript"> 
boxmove("a","a1","a2",1); 
</script>
<script type="text/javascript"> 
boxmove("b","b1","b2",2); 
</script><script type="text/javascript"> 
boxmove("c","c1","c2",3); 
</script>
<script type="text/javascript"> 
boxmove("d","d1","d2",4); 
</script><h2>수동 스크롤 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">왼쪽</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">오른쪽</strong>
</h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
<img src="http://www.jb51.net/images/logo.gif" alt="">
</div>
<div id="bb2"></div>
</div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：li Interlaced color changing effect code upgraded version_javascript skillsNext article：li Interlaced color changing effect code upgraded version_javascript skills

See more

JavaScript four-direction gapless scrolling collection (multi-browser IE, firefox compatible)_Typical special effects

Related articles