js--筋斗云

最新推荐文章于 2022-04-11 14:28:27 发布

liuyi0604

最新推荐文章于 2022-04-11 14:28:27 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/liuyi0604/article/details/81324275

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #333;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 800px;
            height: 42px;
            background-color: #fff;
            margin: 100px auto;
            border-radius: 5px;
            background: url("images/rss.png") no-repeat right center #fff;
            position: relative;
        }
        .cloud{
            width: 83px;
            height: 42px;
            position: absolute;
            top:0;
            left: 0;
            background: url("images/cloud.gif") no-repeat;
        }
        .nav ul{
            position: absolute;
            top:0;
            left: 0;
        }
        .nav li{
            float: left;
            width: 83px;
            height: 42px;
            text-align: center;
            color:black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav" id="nav">
        <span class="cloud" id="cloud"></span>
        <ul>
            <li>首页新闻</li>
            <li>师资力量</li>
            <li>活动策划</li>
            <li>企业文化</li>
            <li>招聘信息</li>
            <li>公司简介</li>
            <li>上海校区</li>
            <li>广州校区</li>
        </ul>
    </div>
</body>
</html>
<script>
    var cloud =document.getElementById("cloud");
    var nav =document.getElementById("nav");
    var lis =nav.children[1].children;
    var current =0;//用于存放点击时候的offsetleft
    // alert(lis.length);
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover =function(){
           target = this.offsetLeft;
        }
        lis[i].onmouseout =function(){
            target=current;  //鼠标离开target是刚才我们点击的位置
        }
        lis[i].onclick =function(){
            current =this.offsetLeft;//点击的时候,把当前位置,存储一下
        }
    }
    //缓动公式
    var leader=0,target=0;
    setInterval(function(){
        leader=leader+(target-leader)/10;
        cloud.style.left=leader+"px";
    },10)
</script>

运行结果: