妙味课堂的导航效果

时间：2016-06-01 21:13:44 阅读：233 评论：0 收藏：0 [点我收藏+]

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body,ul{margin: 0;padding: 0;}
            li{list-style: none;}
            a{text-decoration: none;}
            .clear{zoom:1;}
            .clear:after{content: "";display: block;clear: both;}

            .wrap{margin: 30px auto;width: 1000px;height: 40px;}
            .list li{float: left;height: 40px;display: list-item;}
            .list li a{float: left;font-size: 14px;position: relative;overflow: hidden;height: 40px;color:#e0e03a;}
            .list li a strong{float: left;height: 40px}
            .list li a span{float:left; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; }
        </style>
        <script>
            window.onload=function()
            {
                var oDiv=document.getElementById(‘list‘);
                var aStrong=oDiv.getElementsByTagName(‘strong‘);
                var aA=oDiv.getElementsByTagName(‘a‘);
                var iTarget=oDiv.getElementsByTagName(‘li‘)[0].offsetHeight;

                for(var i=0; i<aStrong.length; i++)
                {
                    //aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName(‘span‘)[0].offsetWidth+‘px‘;
                    aStrong[i].style.position=‘relative‘;
                    aStrong[i].style.top=aStrong[i].style.left=0;
                    
                    aStrong[i].onmouseover=function()
                    {
                        startMove(this, -iTarget);
                    };
                    aStrong[i].onmouseout=function()
                    {
                        startMove(this, 0);
                    };
                }
            };

            function startMove(obj,target)
            {
                clearInterval(obj.iTime);
                obj.iTime=setInterval(function(){
                    if(obj.offsetTop==target)
                    {
                        clearInterval(obj.iTime);
                    }
                    else
                    {
                        var iSpeed=(target-obj.offsetTop)/10;
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        obj.style.top=obj.offsetTop+iSpeed+‘px‘;
                    }
                }, 30);
            }
        </script>
    </header>
    <body>
        <div class="wrap">
            <ul id="list" class="list clear">
                <li><a href="#">
                    <strong>
                        <span>首页</span>
                        <span>首页</span>
                    </strong>
                </a></li>
                <li><a href="#">
                    <strong>
                        <span>前端开发教程</span>
                        <span>前端开发教程</span>
                    </strong>
                </a></li>
                <li><a href="#">
                    <strong>
                        <span>妙味视频教程</span>
                        <span>妙味视频教程</span>
                    </strong>
                </a></li>
                <li><a href="#">
                    <strong>
                        <span>周末班上课安排</span>
                        <span>周末班上课安排</span>
                    </strong>
                </a></li>
                <li><a href="#">
                    <strong>
                        <span>结课标准</span>
                        <span>结课标准</span>
                    </strong>
                </a></li>
                <li><a href="#">
                    <strong>
                        <span>联系妙味</span>
                        <span>联系妙味</span>
                    </strong>
                </a></li>
            </ul>
        </div>
    </body>
</html>

妙味课堂的导航效果

原文：http://www.cnblogs.com/hello-mark/p/5550843.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)