zoukankan      html  css  js  c++  java

  • javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

    boxmove(d1,d2,d3,e,obj) 
    d1 = 外围容器 
    d2 = 内容 
    d3 = 复制d2的内容接替循环滚动 
    e = 方向与方法 
    1,2,3,4 = 自动滚动，分别对应：上,右,下,左 
    "top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左 
    obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。

    页面代码： 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>滚动合集</title> 

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

    <style type="text/css"> 

    div#a,div#b,div#c,div#d { float:left;} 

    h2 { clear:both; } 

    div#b,div#d,div#bb { white-space:nowrap; } 

    </style> 

    </head> 

    <body> 

    <h1>滚动合集</h1> 

    <hr /> 


    <h2>向上</h2> 

    <div id="a" style="overflow:hidden;height:100px;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>  

    <script type="text/javascript"> 

    boxmove("a","a1","a2",1); 

    </script> 



    <h2>向右</h2> 

    <div id="b" style="overflow:hidden;height:100px;90px;">  

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

    <script type="text/javascript"> 

    boxmove("b","b1","b2",2); 

    </script> 


    <h2>向下</h2> 

    <div id="c" style="overflow:hidden;height:100px;90px;">  

    <div id="c1">  

    <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="c2"></div> 

    </div>  

    <script type="text/javascript"> 

    boxmove("c","c1","c2",3); 

    </script> 


    <h2>向左</h2> 

    <div id="d" style="overflow:hidden;height:100px;90px;">  

    <div id="d1">  

    <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="d2"></div> 

    </div>  

    <script type="text/javascript"> 

    boxmove("d","d1","d2",4); 

    </script> 


    <h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2> 

    <div id="aa" style="overflow:hidden;height:100px;90px;">  

    <div id="aa1">  

    <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="aa2"></div> 

    </div>  


    <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;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> 


    </body> 

    </html> 
  • 相关阅读:
    Camera HAL3学习
    Android GPU呈现模式分析
    Android O版本自定义日志输出目录
    Android Configstore HAL
    Ubuntu下设置adb path的方法
    Ubuntu使用技巧
    PHP学习笔记
    mysql安装
    在ubuntu中安装Python
    OS X在使用<semaphore.h>时报错
  • 原文地址：https://www.cnblogs.com/top5/p/1891905.html
Copyright © 2011-2022 走看看