导航栏图标移动

最新推荐文章于 2024-05-09 10:12:04 发布

Ruand~鳴

最新推荐文章于 2024-05-09 10:12:04 发布

阅读量153

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ruyand/article/details/118498410

版权

效果：移动鼠标到导航栏是，小云朵跟着过去。

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>筋斗云移动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        bady{
            background: #333;
        }
        #nav{
            width: 800px;
            height: 42px;
            margin: 100px auto;
            background: url("image/rss.png") right center no-repeat;
            background-color: #fff;
            border-radius: 10px;
            position: relative;
        }
        ul{
            position: absolute;
        }
        #nav li{
            width: 83px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
            float: left;
        }
        #nav span{
            position: absolute;
            top: 0;
            left: 0;
            width: 83px;
            height: 42px;
            background: url("image/cloud.gif") no-repeat;
        }
    </style>
</head>

<body>
    <div id="nav">
        <span id="cloud"></span>
        <ul id="ul">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>武汉</li>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>更多</li>
        </ul>
    </div>
<script>
    function animate(element,target){
        //清理定时器（只产生一个定时器）
            clearInterval(element.timeId);
            element.timeId = setInterval(function(){
                //获取div的当前位置
                var current = element.offsetLeft;//数字类型，没有px
                
                //div每次移动多少像素---步数
                var step = (target-current)/10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //每次移动后的距离
                current += step;
                element.style.left = current + "px";
                if(current==target){
                    //清理定时器
                    clearInterval(element.timeId);
                }
                //测试代码
                console.log("目标位置："+target+"，当前位置："+current+"，每次移动的步数："+step);
                
            },20)
    }
    //获取所有的li标签
        var list = document.getElementById("ul").children;
        
        
        //获取云彩
        var cloud = document.getElementById("cloud");
        //循环遍历，分别注册鼠标进入，鼠标离开，鼠标点击事件
        for(var i = 0;i<list.length;i++){
            //鼠标进入
            list[i].onmouseover = mouseoverHandle;
            
            //鼠标点击
            list[i].onclick = clickHandle;
            
            //鼠标离开
            list[i].onmouseout = mouseoutHandle;
            
        }
        function mouseoverHandle(){//进入
            animate(cloud,this.offsetLeft);
        }
        //点击的时候，记录上次的位置
        var lastPosition = 0;
        function clickHandle(){//点击
            lastPosition = this.offsetLeft;
        }
        
        function mouseoutHandle(){//离开
            animate(cloud,lastPosition);
        }
</script>
</body>
</html>

Ruand~鳴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
导航栏图标移动

效果：移动鼠标到导航栏是，小云朵跟着过去。代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>筋斗云移动</title> <style> *{ margin: 0; padding: 0; } ul{ ...
复制链接

扫一扫