妙味课堂的导航效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了妙味课堂的导航效果相关的知识，希望对你有一定的参考价值。

 

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

 

以上是关于妙味课堂的导航效果的主要内容，如果未能解决你的问题，请参考以下文章

jq仿 妙味课堂导航01

幼儿园小程序实战开发教程（中篇）

幼儿园小程序实战开发教程（中篇）

publiccms实现首页菜单栏下拉的方法

学CSS3的3D动画 ——3D旋转—— 妙味课堂

Android ViewPager+TabHost实现首页导航