扇形展開效果

學習了妙味課堂扇形展開效果

點擊這里預覽

知識點預備：

【1】CSS3中特別重要的transform中的rotate()，現在transform可以將元素進行2D和3D變形。

2D transform常用的transform-function的功能:

      translate()：用來移動元素，可以根據X軸和Ｙ軸坐標重新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。

　　scale()：用來縮小或放大元素，可以使用元素尺寸發生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。rotate()：用來旋轉元素。

　　skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。

　　matrix()：定義矩陣變形，基於X軸和Y軸坐標重新定位元素位置。

3D transform常用的transform-function的功能:

　　translate3d()：移元素元素，用來指定一個3D變形移動位移量translate()：指定3Ｄ位移在Ｚ軸的位移量。

　　scale3d()：用來縮放一個元素。scaleZ():指定Z軸的縮放向量。

　　rotate3d()：指定元素具有一個三維旋轉的角度。

　　rotateX()、rotateY()和rotateZ()：讓元素具有一個旋轉角度。

　　perspective()：指定一個透視投影矩陣。

　　matrix3d()：定義矩陣變形。

　　這里我們只需要2D中的rotate()屬性用來旋轉元素，

　　注意：旋轉的角度以順時針方向為正（按順勢正方向角度增大）

　　其他屬性的用法可以參考這里W3cplus

【2】transfrom-origin

　　指定變形的原點，默認是在元素的中心，可以接受一到三個參數，分別表示變形原點X軸、Y軸、Z軸的位置（可以實現許多有趣的旋轉）

【3】transition

　　過渡transition是一個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果

　　transition-property: 過渡屬性(默認值為all)

　　transition-duration: 過渡持續時間(默認值為0s)

　　transiton-timing-function: 過渡函數(默認值為ease函數)

　　transition-delay: 過渡延遲時間(默認值為0s)
　　想要詳細了解該屬性可以參考深入理解CSS過渡transition

【4】CSS3 :nth-of-type(n) 選擇器

　　選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素

　　好暈，還是來看個例子：

#box div:nth-of-type(2)

這句代碼的意思是選擇在#box下的第2個div

注意：如果在第一個div里嵌套了一個div，那么會選擇嵌套在第一個div里的那個div(-_-!)。

好了，准備工作做完了，開始實現扇形展開效果

第一步

基本樣式布局，直接看代碼

結構：

    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

樣式：

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #666;
        }
        #box{
            width: 1200px;
            height: 700px;
            background: url(img/bg.png) no-repeat;
            position: relative;
            margin: 100px auto;
        }
        #box div{
            width: 400px;
            height: 100px;
            border-radius: 9px;
            position: absolute;
            left: 555px;
            top: 444px;
            /*

            */
            background: url(img/logo.png) no-repeat 280px 56px;
            transform-origin: 35px 50px;
            transition: 1s;
        }
        #box div:nth-of-type(1){
            background-color: #417191;
        }
        #box div:nth-of-type(2){
            background-color: #ce8298;
        }
        #box div:nth-of-type(3){
            background-color: #f78992;
        }
        #box div:nth-of-type(4){
            background-color: #fbc0a5;
        }
        #box div:nth-of-type(5){
            background-color: #f8988f;
        }
        #box div:nth-of-type(6){
            background-color: #f16273;
        }
        #box div:nth-of-type(7){
            background-color: #9c9fcd;
        }
        #box div:nth-of-type(8){
            background-color: #bae2d3;
        }
        #box div:nth-of-type(9){
            background-color: #43bab8;
        }
        #box div:nth-of-type(10){
            background-color: #678d95;

第二步

寫扇形的展開函數go()和閉合函數back()

go()函數

        //使扇形打開
        function go(){
            for(var i = 0;i<divs.length;i++){
                //"rotate("+345-(i*15)+"deg)"
                //不行，因為這樣會先算"rotate("+345
                divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
            }
        }

我們要讓每個div都按一定的角度分開不至於重疊，用(i*15)可以實現這個小目標。342是定義第一個div的位置。

back()函數

        //是扇形合並
        function back(){
            for(var i=0;i<divs.length;i++){
                divs[i].style.transform = "rotate(0deg)";
            }
        }
    }

第三步

當點擊最后一個div時，扇形收起或者打開

        divs[9].onclick = function(){
            if(jilu){
                back();
            }
            else{
                go();
            }
            jilu = !jilu;
            
        }

jilu這個變量的初始值是true,用jilu這個變量是為了當點擊最后一個div時，通過判斷jilu的值，扇形可以收起或者打開

第四步

當點擊每個div時（除了最后一個div），被點擊的div旋轉到270度，並且在他左右邊的div距離他的位置加大。

        //為每個div添加點擊事件
        for(var i=0;i<divs.length - 1;i++){
            divs[i].index = i;
            divs[i].onclick = function(){
                for(var i = 0;i < divs.length;i++){
                    //當第i個div被點擊，其他div的角度
                    if(this.index > i){
                        divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
                    }
                    if( this.index < i){
                        divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
                    }
                }
                //被點擊div的角度
                divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
                
            }
        }

我們可以先看被點擊div的角度，此時(342-(this.index*15) + this.index*15-72)等於270度，那我們將其他的div的角度都加10度，就可以了。

這個效果還是挺簡單的，角度的計算那里有點繞，自己用瀏覽器看看每個div的角度，就會理解為什么這么寫了。

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #666;
        }
        #box{
            width: 1200px;
            height: 700px;
            background: url(img/bg.png) no-repeat;
            position: relative;
            margin: 100px auto;
        }
        #box div{
            width: 400px;
            height: 100px;
            border-radius: 9px;
            position: absolute;
            left: 555px;
            top: 444px;
            /*

            */
            background: url(img/logo.png) no-repeat 280px 56px;
            transform-origin: 35px 50px;
            transition: 1s;
        }
        #box div:nth-of-type(1){
            background-color: #417191;
        }
        #box div:nth-of-type(2){
            background-color: #ce8298;
        }
        #box div:nth-of-type(3){
            background-color: #f78992;
        }
        #box div:nth-of-type(4){
            background-color: #fbc0a5;
        }
        #box div:nth-of-type(5){
            background-color: #f8988f;
        }
        #box div:nth-of-type(6){
            background-color: #f16273;
        }
        #box div:nth-of-type(7){
            background-color: #9c9fcd;
        }
        #box div:nth-of-type(8){
            background-color: #bae2d3;
        }
        #box div:nth-of-type(9){
            background-color: #43bab8;
        }
        #box div:nth-of-type(10){
            background-color: #678d95;

    </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>
    window.onload = function(){
        var box = document.getElementById('box');
        var divs = box.getElementsByTagName('div');
        var jilu = true;

        setTimeout(function(){
            go();
        },1000);
        
        //8 222 270 +48
        //7 237 270 +33
        //6 252 270 +18
        // 15

        //為每個div添加點擊事件
        for(var i=0;i<divs.length - 1;i++){
            divs[i].index = i;
            divs[i].onclick = function(){
                for(var i = 0;i < divs.length;i++){
                    //當第i個div被點擊，其他div的角度
                    if(this.index > i){
                        divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
                    }
                    if( this.index < i){
                        divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
                    }
                }
                //被點擊div的角度
                divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
                
            }
        }

        //點擊最后一個圖片，合並扇形
        divs[9].onclick = function(){
            if(jilu){
                back();
            }
            else{
                go();
            }
            jilu = !jilu;
            
        }

        //使扇形打開
        function go(){
            for(var i = 0;i<divs.length;i++){
                //"rotate("+345-(i*15)+"deg)"
                //不行，因為這樣會先算"rotate("+345
                divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
            }
        }
        //是扇形合並
        function back(){
            for(var i=0;i<divs.length;i++){
                divs[i].style.transform = "rotate(0deg)";
            }
        }
    }


    </script>
</body>
</html>