原生JS实现手风琴特效

越陌度阡

发布于 2020-11-26 16:07:03

16.3K0

发布于 2020-11-26 16:07:03

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

今天给大家分享一个用原生JS实现的手风琴特效，效果如下：

实现代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>原生JS实现手风琴特效</title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 引入的运动函数 -->
    <script src="js/move.js"></script>

    <script>
        // 获取元素
        var box = document.getElementById("box");
        var list = box.children[0];
        var lis = list.children;

        // 操作li设置背景
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundImage = "url(images/" + i + ".jpg)";

            // 移入的时候让当前这个运动到800，其余运动到100
            lis[i].onmouseover = function () {
                for (var i = 0; i < lis.length; i++) {
                    animate(lis[i], { "width": 100 });
                }
                animate(this, { "width": 800 });
            };

            // 移出时，所有回到240
            lis[i].onmouseout = function () {
                for (var i = 0; i < lis.length; i++) {
                    animate(lis[i], { "width": 240 });
                }
            };
        }
    </script>
</body>

</html>

以下是上面代码中引入的运动函数move.js代码。

function animate(tag, obj, fn) {
    clearInterval(tag.timer);
    tag.timer = setInterval(function () {
        // 假设当前这一次定时器代码执行可以清除（每个样式都到达了指定位置）
        var flag = true;
        // 先遍历obj
        for (var k in obj) {
            // 由于obj中有一些属性可能是zIndex或者opacity，这时需要单独处理
            if (k == "opacity") {
                // 将透明度当前值和目标值都设置为扩大后的倍数，设置时除以相应倍数即可
                var target = obj[k] * 100;
                var leader = getStyle(tag, k) * 100 || 0;
                var step = (target - leader) / 10;

                // 给step设置取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;

                // 透明度的设置需要去掉单位
                tag.style[k] = leader / 100;

            } else if (k == "zIndex") {
                // zIndex不需要渐变，直接设置即可
                tag.style.zIndex = obj[k];

            } else {
                var target = obj[k];
                var leader = parseInt(getStyle(tag, k)) || 0;
                var step = (target - leader) / 10;

                // 给step设置取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                tag.style[k] = leader + "px";
            };

            // 提取出每种条件都需要的代码
            if (leader != target) {
                flag = false;
            }
        };
        if (flag) {
            clearInterval(tag.timer);
            fn && fn();
        }

    }, 20);

}

function getStyle(tag, attr) {
    if (tag.currentStyle) {
        return tag.currentStyle[attr];
    } else {
        return getComputedStyle(tag, null)[attr];
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

函数