原生JS实现百叶窗特效

越陌度阡

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

2.1K0

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

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

分享一个用原生JS实现的百叶窗特效，效果如下：

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现文章目录百叶窗特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #ul1,
        #ul2 {
            width: 300px;
            height: auto;
            float: left;
            border-top: 1px #000000 solid;
            margin: 20px;
            background-color: purple;
        }

        li {
            width: 100%;
            height: 30px;
            overflow: hidden;
            position: relative;
            border-bottom: 1px #333333 dashed;
            line-height: 30px;
        }

        li div {
            position: absolute;
            top: -30px;
        }

        li div p {
            height: 30px;
            color: #fff;
            padding-left: 10px;
        }
    </style>

    <script type="text/javascript" src="js/move.js"></script>

    <script>
        window.onload = function () {
            //获取列表ul1
            var oUl = document.getElementById('ul1');
            //获取列表ul2
            var oUl2 = document.getElementById('ul2');

            //调用函数让ul1显示
            toShow(oUl);
            //设置定时器，两秒钟后显示ul2,两秒钟为单个ul发生变化时长的一半
            setTimeout(function () {
                toShow(oUl2);
            }, 2000);


            function toShow(obj) {
                //获取所有的div
                var aDiv = obj.getElementsByTagName('div');
                //设定变化从第几个开始
                var iNow = 0;
                //初始化从上到下依次变化的定时器
                var timer = null;
                //设置一个开关，切换一上一下的变化
                var bBtn = true;

                //设置定时器，从向到下或是从下到上4秒钟完成一次
                setInterval(function () {

                    toChange();

                }, 4000);


                function toChange() {

                    timer = setInterval(function () {
                        //如果当前变化的div是所有变化div的最后一个
                        if (iNow == aDiv.length) {
                            //清除定时器
                            clearInterval(timer);
                            //变化起始div的下标归零
                            iNow = 0;
                            //将当前运动的状态取反
                            bBtn = !bBtn;
                        }
                        else if (bBtn) {
                            //调用move.js里面的运动函,传入元素，修改位置,向下
                            startMove(aDiv[iNow], { top: 0 });
                            //执行完上一个然后执行下一个，累加
                            iNow++;
                        }
                        else {
                            //调用move.js里面的运动函,传入元素，修改位置,向上
                            startMove(aDiv[iNow], { top: -30 });
                            //执行完上一个然后执行下一个，累加
                            iNow++;
                        }
                    }, 100);
                }
            }
        };
    </script>
</head>

<body>
    <ul id="ul1">
        <li>
            <div>
                <p>生活没有彩排，每天都是现场直播！</p>
                <p>如果那两字个没有颤抖，我不会难受。</p>
            </div>
        </li>
        <li>
            <div>
                <p>挡不住的青春，曾经有过多少惆怅？</p>
                <p>开始的开始，我们都是孩子。</p>
            </div>
        </li>
        <li>
            <div>
                <p>最后的最后，渴望变成开使！</p>
                <p>如果每一天都是生命中的最后一天。</p>
            </div>
        </li>
        <li>
            <div>
                <p>众里寻她千百度，蓦然回首，那人却在...</p>
                <p>生命是自己的画板，不要依赖别人着色。</p>
            </div>
        </li>
    </ul>

    <ul id="ul2">
        <li>
            <div>
                <p>生活没有彩排，每天都是现场直播！</p>
                <p>如果那两字个没有颤抖，我不会难受。</p>
            </div>
        </li>
        <li>
            <div>
                <p>挡不住的青春，曾经有过多少惆怅？</p>
                <p>开始的开始，我们都是孩子。</p>
            </div>
        </li>
        <li>
            <div>
                <p>最后的最后，渴望变成开使！</p>
                <p>如果每一天都是生命中的最后一天。</p>
            </div>
        </li>
        <li>
            <div>
                <p>众里寻她千百度，蓦然回首，那人却在...</p>
                <p>生命是自己的画板，不要依赖别人着色。</p>
            </div>
        </li>
    </ul>

</body>

</html>

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

// move.js

function startMove(obj, json, endFn) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {

        var bBtn = true;

        for (var attr in json) {

            var iCur = 0;

            if (attr == 'opacity') {
                if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
                    iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

                } else {
                    iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
                }
            } else {
                iCur = parseInt(getStyle(obj, attr)) || 0;
            }

            var iSpeed = (json[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (iCur != json[attr]) {
                bBtn = false;
            }

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;

            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }


        }

        if (bBtn) {
            clearInterval(obj.timer);

            if (endFn) {
                endFn.call(obj);
            }
        }

    }, 30);

}


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

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

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

函数