弹性菜单 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #ul1{
                width: 428px;
                height: 30px;
                position: relative;
                margin: 20px auto;
            }
            #ul1 li{
                width: 100px;
                height: 30px;
                background: red;
                list-style: none;
                float: left;
                border: 1px solid #000;
                margin-right: 5px;
                line-height: 30px;
                text-align: center;
            }
            #ul1 #mark{
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;
            }
            #ul1 #mark ul{
                width: 428px;
                position: absolute;
                left: -1px;
                top: -1px;
                color: #fff;
            }
        </style>
        <script>
            window.onload=function(){
                var oMark=document.getElementById("mark");
                var aBox=document.getElementsByClassName("box");
                var childUl=oMark.getElementsByTagName("ul")[0];
                
                var timer=null;
                var timer2=null;
                var iSpeed=0;
                
                for(var i=0;i<aBox.length;i++){
                    aBox[i].onmouseover=function(){
                        clearInterval(timer2);
                        startMove(this.offsetLeft);
                    }
                    aBox[i].onmouseout=function(){
                        timer2=setTimeout(function(){
                            startMove(0);
                        },100)
                        
                    }
                }
                oMark.onmouseover=function(){
                    clearInterval(timer2);
                }
                oMark.onmouseout=function(){
                    timer2=setTimeout(function(){
                            startMove(0);
                        },100)
                }
                function startMove(iTarget){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        iSpeed+=(iTarget-oMark.offsetLeft)/6;
                        iSpeed*=0.75;
                        if(Math.abs(iSpeed)<=1 && Math.abs(iTarget-oMark.offsetLeft)<=1){
                            clearInterval(timer);
                            oMark.style.left=iTarget+"px";
                            childUl.style.left=-iTarget+"px";
                            iSpeed=0;
                        }else{
                            oMark.style.left=oMark.offsetLeft+iSpeed+"px";
                            childUl.style.left=-oMark.offsetLeft+"px";
                        }
                    },30)
                }
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li id="mark">
                <ul>
                    <li class="box">首页</li>
                    <li class="box">论坛</li>
                    <li class="box">视频</li>
                    <li class="box">留言</li>
                </ul>
            </li>
            <li class="box">首页</li>
            <li class="box">论坛</li>
            <li class="box">视频</li>
            <li class="box">留言</li>
        </ul>
    </body>
</html>

 

posted @ 2019-01-09 13:50  webxy  阅读(124)  评论(0)    收藏  举报