前端开发之js基础(10)

最新推荐文章于 2024-04-08 19:14:22 发布

DHRMM999

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量141

点赞数

分类专栏： js特效学习笔记

本文链接：https://blog.csdn.net/DHRMM999/article/details/82623635

版权

js特效学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

导航栏实现筋斗云效果

css代码

<style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .box{
                width: 800px;
                height: 42px;
                background: url(../images/wifi.png) right center no-repeat;
                margin: 200px auto;
                border-radius: 8px;
                position: relative;
            }
            .box ul{
                width: 800px;
                height: 42px;
                position: relative;
            }
            .box ul li{
                width: 83px;
                height: 42px;
                text-align: center;
                font: 500 16px/42px simhei;
                float: left;
                cursor: pointer;
            }
            .box span{
                position: absolute;
                left: 0;
                right: 0;
                width: 83px;
                height: 42px;
                background: url(../images/cloud.gif) no-repeat;
            }
        </style>

html代码

<body>
        <div class="box">
            <span></span>
            <ul>
                <li>首页新闻</li>
                <li>活动策划</li>
                <li>师资力量</li>
                <li>企业文化</li>
                <li>招聘信息</li>
                <li>公司简介</li>
                <li>上海校区</li>
                <li>广州校区</li>
            </ul>
        </div>
    </body>

js代码

<script type="text/javascript">
        var box = document.getElementsByClassName("box");
        var li = document.getElementsByTagName("li");
        var liwidth = li[0].offsetWidth;
        var span = document.getElementsByTagName("span")[0];
        console.log(span)
        //计数器
        var count=0;
        for(var i=0;i<li.length;i++){
            li[i].index = i;//获取索引值
            li[i].onmouseover = function(){
                //让span移动到鼠标指向的地方
                animate(span,this.index*liwidth);
            }
            //鼠标移开
            li[i].onmouseout = function(){
                //让鼠标回到原来li的位置
                animate(span,count*liwidth);
            }
            //鼠标点击
            li[i].onclick = function(){
                count=this.index;
                animate(span,count*liwidth);
            }
        }
        //封装动画
        function animate(obj,target){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var speed = (target-obj.offsetLeft)/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                var result = target-obj.offsetLeft;
                obj.style.left = obj.offsetLeft+speed+"px";
                if(Math.abs(result)<=Math.abs(speed)){
                    clearInterval(obj.timer);
                    obj.style.left = target+"px";
                }
            },18);
        }
    </script>

DHRMM999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发之js基础(10)

导航栏实现筋斗云效果css代码&lt;style type="text/css"&gt; *{ padding: 0; margin: 0; list-style: none; } .box{ ...
复制链接

扫一扫