缓动动画应用在导航上

最新推荐文章于 2020-08-29 19:40:49 发布

小白变怪兽

最新推荐文章于 2020-08-29 19:40:49 发布

阅读量360

点赞数 1

分类专栏： javascript 文章标签：动画缓动动画

本文链接：https://blog.csdn.net/u013558749/article/details/53124305

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

现如今越来越多的网站追求比较炫酷的效果以及更加的注重用户体验。下面我就来说一个很多网站都运用到的效果（缓动动画）

首先先来解释下什么是缓动动画，简单的解释就是从起始位置到目标位置速度慢慢减缓直至到达。

话不多说直接上代码
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        body {
            background-color: #333;
        }

        .nav {
            width: 800px;
            height: 42px;
            margin: 100px auto;
            background-color: #fff;
            border-radius: 10px;
            position: relative;
        }

        .nav li {
            width: 83px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            float: left;
            cursor: pointer;
        }

        .nav span {
            position: absolute;
            top: 0;
            left: 0;
            width: 83px;
            height: 37px;
            border-bottom: 5px solid #eb4509;
        }

        ul {
            position: relative;
        }
    </style>
</head>
<body>
<div class="nav">
    <span id="cloud"></span>
    <ul id="navBar">
        <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 navBar = document.getElementById("navBar");

    var lis = navBar.children;
    var wid = lis[0].offsetWidth;

    var lastPosition = 0;

    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            animate(cloud, this.offsetLeft);
        }

        lis[i].onmouseout = function () {
            animate(cloud, lastPosition);
            //鼠标移出回到之前被点击的li的位置，默认为0
        }

        lis[i].onclick = function () {
            lastPosition = this.offsetLeft;
            //记录下当前点击li的位置
        }
    }

function animate(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;//放在这儿只要有一个返回false那就是false
            for (var k in json) {
                //var flag = true;//如果放在这儿变成查看最后一个执行的情况，执行好了返回true，未完成返回false
                //处理特殊情况之opacity（单位不是px的）
                if(k === "opacity"){
                    var target = json[k]*100;
                    var leader = parseInt(getStyle(obj, k))*100;
                    var step = (target - leader) / 10;
                    //为了让计算后的值精确不为小数加的判断
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader/100;
                }else if(k === "zIndex"){
                //处理特殊情况之opacity（单位不是px的）
                    obj.style.zIndex = json[k];
                }else{
                    var target = json[k];
                    var leader = parseInt(getStyle(obj, k));
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    console.log("test");
                    obj.style[k] = leader + "px";
                }
                if (leader !== target) {
                    flag = false;
                }
             }

            if(flag){
                clearInterval(obj.timer);
                if (fn) {
                    fn();//回调函数
                }
            }
        }, 15)
    }

    //这下面函数实现的是获取元素任意属性值的兼容写法
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }