官网滑块效果 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{padding:0px;
        margin:0px;}
        #mask{
            width:80px;
            height:80px;
            background: green;
            opacity:0.5;
            position: absolute;
            top:0px;
            left:0px;
            z-index:99;
        }
        #box{
            border:2px solid red;
            overflow: hidden;
            width:530px;
            height:80px;
            margin:50px auto;
            position: relative;
        }
        #box li{
                width:80px;
                height:80px;
                line-height: 80px;
                float:left;
                background: #999;
                list-style: none;
                margin-right:10px;
                text-align: center;
                font-size:20px;
                color:#fff;
            }
        #box .list{margin-right:0px}
        </style>
        <script src="tween.js"></script>
        <script>
                window.onload=function(){
                    var oBox=document.getElementById("box");
                    var aLi=oBox.getElementsByTagName('li');
                    var oMask=document.getElementById("mask");
                    var c=Tween.Back.easeOut;   //运动曲线
                    var bok=true;    //用于判断鼠标移出是否在点击之后发生的，true是在点击之后
                    for(var i=0;i<aLi.length;i++){
                            aLi[i].onmouseenter=function(){
                                bok=false;    //鼠标移入且没有点击按钮让滑块回到0的位置
                                that=this;
                                move(oMask,{left:this.offsetLeft},{time:500,easing:c})
                            }
                    }
                    oBox.onmouseleave=function(){
                        if(bok){
                            move(oMask,{left:that.offsetLeft},{time:500,easing:c});
                        }
                        else{move(oMask,{left:0},{time:500,easing:c});}        
                    }
                    oMask.onclick=function(){
                            bok=true;  //点击之后让滑块固定
                    }
                }
        </script>
    </head>
    <body>
        
                <ul id="box">
                    <li>第一块</li>
                    <li>第二块</li>
                    <li>第三块</li>
                    <li>第四块</li>
                    <li>第五块</li>
                    <li class="list">第六块</li>
                    <div id="mask"></div>
                </ul>
            
    </body>
</html>

 

posted @ 2016-07-25 20:37  河南小样  阅读(184)  评论(0)    收藏  举报