一个滑动展示的小代码

    版权声明：转载时请以超链接形式标明文章原始出处 http://blog.lonelystar.org/post/5.html

    一个写给别人的小代码

    顺便也贴上来

    这是一个滑动展示用的小容器

    通过鼠标移动和离开触发滑动效果

     
    HTML语言: 滑动展示
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">   
     
    <head> 
     
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     
        <title>12.1</title> 
     
        <meta name="Generator" content="EditPlus"> 
     
        <meta name="Author" content=""> 
     
        <meta name="Keywords" content=""> 
     
        <meta name="Description" content=""> 
     
        <style> 
            #test {width:400px;height:200px;position:relative;overflow:hidden;margin:100px auto}  
     
            #test div {width:190px;height:200px;position:absolute;}  
     
            #d0{background:red;}  
     
            #d1{background:#000;left:100px;color:#fff;}  
     
            #d2{background:blue;left:200px;}  
     
            #d3{background:gray;left:300px;}  
     
          
    </style> 
    </head> 
     
    <body> 
     
    <div id="test" onmouseout="TestEle(this,event,ResetDiv)"> 
     
        <div id="d0" onmouseover="ChkDivMove(0)">一</div> 
     
        <div id="d1" onmouseover="ChkDivMove(1)">二</div> 
     
        <div id="d2" onmouseover="ChkDivMove(2)">三</div> 
     
        <div id="d3" onmouseover="ChkDivMove(3)">四</div> 
     
    </div> 
     
    <script type="text/javascript"> 
    var $=function(id){return document.getElementById(id)},  
     
    Timer=[null,null,null,null],  
     
    ODiv=[0,100,200,300],  
     
    ChkDivMove=function(N){  
     
        var i=Timer.length,L=ODiv.length;  
        while(i--){clearTimeout(Timer[i]),Timer[i]=null;}  
        i=N;  
        while(i>-1)LeftScrollDiv(i,70*i--);  
        for(i=N+1;i<L;i++)RightScrollDiv(i,(i-1)*70+190);  
    },  
     
    LeftScrollDiv=function(i,MinX){  
     
        var lx=ODiv[i];  
     
        (function(){  
     
            lx>MinX&&($('d'+i).style.left=--lx+'px',ODiv[i]=lx,Timer[i]=setTimeout(arguments.callee,1))  
     
        })();  
     
    },  
     
    RightScrollDiv=function(i,MaxX){  
     
        var lx=ODiv[i];  
     
        (function(){  
     
            lx<MaxX&&($('d'+i).style.left=++lx+'px',ODiv[i]=lx,Timer[i]=setTimeout(arguments.callee,1))  
     
        })();  
     
    },  
     
    ResetDiv=function(){  
          
        var i,lx;  
        for(i=Timer.length;i--;){clearTimeout(Timer[i]),Timer[i]=null;}  
        i=ODiv.length;  
        while(--i)ODiv[i]>(lx=i*100)?LeftScrollDiv(i,lx):RightScrollDiv(i,lx)  
    },  
    TestEle=function(obj, e,CallBack){  
        e.currentTarget?(e.relatedTarget != obj&&obj != e.relatedTarget.parentNode&&CallBack()):(e.toElement != obj&&obj != e.toElement.parentNode&&    CallBack()  )  
    }  
    </script> 
     
    </body> 
     
    </html>

    Tag：javascript  滑动展示  
    lonelystar 发表于2011年2月8日 | 分类：JavaScript小代码 | 评论: 3 | 引用: 0 | 浏览:

      本文现有3 条评论

    • 1  漂亮Haha

      locweb | 发表于2011-2-10 15:43:23 [回复]

    • 2  效果非常不错，我见过jquery实现的效果，呵呵...我还是小菜，需要好好研究才行呢...

      Tilaa | 发表于2011-2-17 21:56:05 [回复]

    • 3  学习了。。不错。。。[URL][/URL]

      斌 | 发表于2011-5-27 16:43:42 [回复]

    欢迎您发表评论：

     
    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。