折扇效果的实现

红太狼 2022-05-21 06:11 45阅读 0赞

思路：

封装函数使每个div进行旋转

点击最后一个div将所有div重置到初始位置

使用延迟定时器调用函数（实现页面加载完成之后的展开动画）

点击除了最后一个div以外的展开动画（根据点击的div的所引致，让所有div进行旋转，设置点击元素之前和之后的div的旋转偏移值）

大致效果，点击最上面的div，实现扇子的折叠和展开效果，点击其他任意一个div，就让当前这个div在垂直位置显示

看一个效果图：

![70][]

代码如下：（如果想要看完整的效果，粘贴复制，浏览器浏览即可查看哦）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>折扇</title>
        <style>
          #box{
              width:1000px; height:800px; margin:0 auto; position:relative;
              transform-style:preserve-3d; perspective:600px;
          }
            #box div{
                width:300px; height:60px; position:absolute; transform-origin:30px 5px;
                border-radius:9px;
                left:400px;
                top:300px;
                transition:1s;
            }
            #box div:nth-of-type(1){background:#ED7F6A;}
            #box div:nth-of-type(2){background:#666666;}
            #box div:nth-of-type(3){background:#993300;}
            #box div:nth-of-type(4){background:#e15671;}
            #box div:nth-of-type(5){background:#0e566c;}
            #box div:nth-of-type(6){background:#B8E6AF;}
            #box div:nth-of-type(7){background:#B8C3CC;}
            #box div:nth-of-type(8){background:#f2dfa9;}
            #box div:nth-of-type(9){background:#EB7159;}
            #box div:nth-of-type(10){background:#EB7667;}
        </style>
    </head>
    <body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    <script>
        var oBox = document.querySelector("#box");
        var aDiv = oBox.querySelectorAll("div");
        var len = aDiv.length;
        var onOff = true;
        setTimeout(spread,300);
        aDiv[len-1].onclick = function(){//点击最后一个元素的时候实现扇子的展开和折叠效果
            if(onOff){
                fold();
            }else{
                spread();
            }
            onOff = !onOff;
        }
        for(var i=0; i<len-1; i++){
            aDiv[i].index = i;
            aDiv[i].onclick = function(){
                for(var i=0; i<len; i++){
                    var deg = 270 - (340-16*(this.index));//计算我们当前点击的元素要旋转多少度到达270度的位置
                    if(i<this.index){
                        aDiv[i].style.transform = `rotate(${340-16*i+deg+10}deg)`;
                    }else if(i>this.index){
                        aDiv[i].style.transform = `rotate(${340-16*i+deg - 10}deg)`;
                    }else{
                        aDiv[i].style.transform = `rotate(${340-16*i+deg}deg)`;
                    }
    
                }
            }
        }
    
        function  spread(){//扇子展开效果
            for(var i=0;i<len; i++){
                aDiv[i].style.transform = `rotate(${340-16*i}deg)`;
            }
        }
        function fold(){//扇子折叠效果
            for(var i=0; i<len; i++){
                aDiv[i].style.transform = "rotate(0deg)"
            }
        }
    </script>
    </body>
    </html>

[70]: /images/20220521/940431ab26814a2899e0dc20778375e3.png