js特效：js实现筋斗云的效果代码-js教程-PHP中文网

js特效：js实现筋斗云的效果代码

不言

发布： 2018-08-14 16:50:12

原创

2695 人浏览过

本篇文章给大家带来的内容是关于js特效：js实现筋斗云的效果代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

理解缓动动画的原理

<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>筋斗云</title>
        <style>
        *{margin: 0; padding: 0;}
        ul {list-style:none;}
        body {
            background-color: #000;
        }
        .nav {
            width: 800px;
            height: 42px;
            background:url("images/rss.png") no-repeat right center #fff;
            margin: 100px auto;
            border-radius: 5px;
            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;
            line-height: 42px;
            text-align: center;
            color: #000;
            cursor: pointer;
        }
    </style>
    </head>
    <body>
        <p class="nav" id="nav">
            <span class="cloud" id="cloud"></span>
            <ul>
                <li>AI数据中心</li>
                <li>财务中心</li>
                <li>事业中心</li>
                <li>陆兵学院</li>
                <li>供应中心</li>
                <li>总经办</li>
                <li>品牌中心</li>
                <li>人力中心</li>
            </ul>
        </p>
    </body>
</html>
<script>
    // 获取元素
    var cloud = document.getElementById("cloud");
    var nav = document.getElementById("nav");
    var lis = nav.children[1].children;
    // 记录点击时的位置
    var current = 0;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function(){
            target = this.offsetLeft;
        }
        lis[i].onclick = function(){
            current = this.offsetLeft;
        }
        lis[i].onmouseout = function(){
            target = current;
        }
    }
    // 缓动动画
    var leader = 0,target =0;
    setInterval(function(){
        leader = leader + (target -leader)/10;
        cloud.style.left = leader + "px";
    },10);
     
</script>

登录后复制

效果