百叶窗效果

Posted 2021-02-01 gxywb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百叶窗效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            li{
                list-style: none;
            }
            #ul1,#ul2{
                width: 300px;
                height: auto;
                float: left;
                border-top: 1px solid #000;
                margin: 20px;
            }
            li{
                width: 100%;
                height: 30px;
                overflow: hidden;
                position: relative;
                border-bottom: 1px dashed #333;
                line-height: 30px;
            }
            li div{
                position: absolute;
                top: -30px;
                left: 0;
            }
            li div p{
                height: 30px;
            }
        </style>
        <script src="move.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("ul1");
                var oUl2=document.getElementById("ul2");
                
                
                toShow(oUl);
                setTimeout(function(){
                    toShow(oUl2);
                },2000);
                
                function toShow(obj){
                    var aDiv=obj.getElementsByTagName("div");
                    var iNow=0;
                    var timer=null;
                    var bBtn=true;
                    setInterval(function(){
                        toChange();
                    },4000);
                    
                    function toChange(){
                        timer=setInterval(function(){
                            if(iNow==aDiv.length){
                                clearInterval(timer);
                                iNow=0;
                                bBtn=!bBtn;
                            }else if(bBtn){
                                startMove(aDiv[iNow],{top:0});
                                iNow++;
                            }else{
                                startMove(aDiv[iNow],{top:-30});
                                iNow++;
                            }
                            
                        },100);
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>
                <div>
                    <p>1111111111111</p>
                    <p>2222222222222</p>
                </div>
            </li>
            <li>
                <div>
                    <p>33333333333333</p>
                    <p>44444444444444</p>
                </div>
            </li>
            <li>
                <div>
                    <p>555555555555555</p>
                    <p>666666666666666</p>
                </div>
            </li>
            <li>
                <div>
                    <p>777777777777777</p>
                    <p>88888888888888</p>
                </div>
            </li>
            <li>
                <div>
                    <p>999999999999999</p>
                    <p>ddddddddddddddd</p>
                </div>
            </li>
            <li>
                <div>
                    <p>aaaaaaaaaaaaaaaa</p>
                    <p>cccccccccccccccc</p>
                </div>
            </li>
        </ul>
        
        <ul id="ul2">
            <li>
                <div>
                    <p>1111111111111</p>
                    <p>2222222222222</p>
                </div>
            </li>
            <li>
                <div>
                    <p>33333333333333</p>
                    <p>44444444444444</p>
                </div>
            </li>
            <li>
                <div>
                    <p>555555555555555</p>
                    <p>666666666666666</p>
                </div>
            </li>
            <li>
                <div>
                    <p>777777777777777</p>
                    <p>88888888888888</p>
                </div>
            </li>
            <li>
                <div>
                    <p>999999999999999</p>
                    <p>ddddddddddddddd</p>
                </div>
            </li>
            <li>
                <div>
                    <p>aaaaaaaaaaaaaaaa</p>
                    <p>cccccccccccccccc</p>
                </div>
            </li>
        </ul>
    </body>
</html>

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for(var attr in json) {
            var iTarget = json[attr];
            if(attr == "opacity") {
                iCur = Math.round(css(obj, "opacity") * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

            iSpeed = (iTarget - iCur) / 8;

            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if(iCur != iTarget) {
                iBtn = false;
                if(attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed) + ‘)‘;
                } else {
                    obj.style[attr] = iCur + iSpeed + ‘px‘;
                }
            }

        }
        if(iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

    }, 30);
}

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

以上是关于百叶窗效果的主要内容，如果未能解决你的问题，请参考以下文章

pixijs shader 制作百叶窗效果

如何使用WPF 实现百叶窗切换动画

JS/JQuery 图像过渡效果——百叶窗？

百叶窗效果

WPF Clip实现百叶窗

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件