扇形展开效果

学习了妙味课堂扇形展开效果

点击这里预览

知识点预备：

【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 个子元素的每个元素

　　好晕，还是来看个例子：

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

这句代码的意思是选择在#box下的第2个div

注意：如果在第一个div里嵌套了一个div，那么会选择嵌套在第一个div里的那个div(-_-!)。

好了，准备工作做完了，开始实现扇形展开效果

第一步

基本样式布局，直接看代码

结构：

 1     <div id="box">
 2         <div></div>
 3         <div></div>
 4         <div></div>
 5         <div></div>
 6         <div></div>
 7         <div></div>
 8         <div></div>
 9         <div></div>
10         <div></div>
11         <div></div>
12     </div>

样式：

 1         *{
 2             margin: 0;
 3             padding: 0;
 4         }
 5         body{
 6             background: #666;
 7         }
 8         #box{
 9             width: 1200px;
10             height: 700px;
11             background: url(img/bg.png) no-repeat;
12             position: relative;
13             margin: 100px auto;
14         }
15         #box div{
16             width: 400px;
17             height: 100px;
18             border-radius: 9px;
19             position: absolute;
20             left: 555px;
21             top: 444px;
22             /*
23 
24             */
25             background: url(img/logo.png) no-repeat 280px 56px;
26             transform-origin: 35px 50px;
27             transition: 1s;
28         }
29         #box div:nth-of-type(1){
30             background-color: #417191;
31         }
32         #box div:nth-of-type(2){
33             background-color: #ce8298;
34         }
35         #box div:nth-of-type(3){
36             background-color: #f78992;
37         }
38         #box div:nth-of-type(4){
39             background-color: #fbc0a5;
40         }
41         #box div:nth-of-type(5){
42             background-color: #f8988f;
43         }
44         #box div:nth-of-type(6){
45             background-color: #f16273;
46         }
47         #box div:nth-of-type(7){
48             background-color: #9c9fcd;
49         }
50         #box div:nth-of-type(8){
51             background-color: #bae2d3;
52         }
53         #box div:nth-of-type(9){
54             background-color: #43bab8;
55         }
56         #box div:nth-of-type(10){
57             background-color: #678d95;

第二步

写扇形的展开函数go()和闭合函数back()

go()函数

1         //使扇形打开
2         function go(){
3             for(var i = 0;i<divs.length;i++){
4                 //"rotate("+345-(i*15)+"deg)"
5                 //不行，因为这样会先算"rotate("+345
6                 divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
7             }
8         }

我们要让每个div都按一定的角度分开不至于重叠，用(i*15)可以实现这个小目标。342是定义第一个div的位置。

back()函数

1         //是扇形合并
2         function back(){
3             for(var i=0;i<divs.length;i++){
4                 divs[i].style.transform = "rotate(0deg)";
5             }
6         }
7     }

第三步

当点击最后一个div时，扇形收起或者打开

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

jilu这个变量的初始值是true,用jilu这个变量是为了当点击最后一个div时，通过判断jilu的值，扇形可以收起或者打开

第四步

当点击每个div时（除了最后一个div），被点击的div旋转到270度，并且在他左右边的div距离他的位置加大。

 1         //为每个div添加点击事件
 2         for(var i=0;i<divs.length - 1;i++){
 3             divs[i].index = i;
 4             divs[i].onclick = function(){
 5                 for(var i = 0;i < divs.length;i++){
 6                     //当第i个div被点击，其他div的角度
 7                     if(this.index > i){
 8                         divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
 9                     }
10                     if( this.index < i){
11                         divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
12                     }
13                 }
14                 //被点击div的角度
15                 divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
16                 
17             }
18         }

我们可以先看被点击div的角度，此时(342-(this.index*15) + this.index*15-72)等于270度，那我们将其他的div的角度都加10度，就可以了。

这个效果还是挺简单的，角度的计算那里有点绕，自己用浏览器看看每个div的角度，就会理解为什么这么写了。

源码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         body{
 12             background: #666;
 13         }
 14         #box{
 15              1200px;
 16             height: 700px;
 17             background: url(img/bg.png) no-repeat;
 18             position: relative;
 19             margin: 100px auto;
 20         }
 21         #box div{
 22              400px;
 23             height: 100px;
 24             border-radius: 9px;
 25             position: absolute;
 26             left: 555px;
 27             top: 444px;
 28             /*
 29 
 30             */
 31             background: url(img/logo.png) no-repeat 280px 56px;
 32             transform-origin: 35px 50px;
 33             transition: 1s;
 34         }
 35         #box div:nth-of-type(1){
 36             background-color: #417191;
 37         }
 38         #box div:nth-of-type(2){
 39             background-color: #ce8298;
 40         }
 41         #box div:nth-of-type(3){
 42             background-color: #f78992;
 43         }
 44         #box div:nth-of-type(4){
 45             background-color: #fbc0a5;
 46         }
 47         #box div:nth-of-type(5){
 48             background-color: #f8988f;
 49         }
 50         #box div:nth-of-type(6){
 51             background-color: #f16273;
 52         }
 53         #box div:nth-of-type(7){
 54             background-color: #9c9fcd;
 55         }
 56         #box div:nth-of-type(8){
 57             background-color: #bae2d3;
 58         }
 59         #box div:nth-of-type(9){
 60             background-color: #43bab8;
 61         }
 62         #box div:nth-of-type(10){
 63             background-color: #678d95;
 64 
 65     </style>
 66 </head>
 67 <body>
 68     <div id="box">
 69         <div></div>
 70         <div></div>
 71         <div></div>
 72         <div></div>
 73         <div></div>
 74         <div></div>
 75         <div></div>
 76         <div></div>
 77         <div></div>
 78         <div></div>
 79     </div>
 80     <script>
 81     window.onload = function(){
 82         var box = document.getElementById('box');
 83         var divs = box.getElementsByTagName('div');
 84         var jilu = true;
 85 
 86         setTimeout(function(){
 87             go();
 88         },1000);
 89         
 90         //8 222 270 +48
 91         //7 237 270 +33
 92         //6 252 270 +18
 93         // 15
 94 
 95         //为每个div添加点击事件
 96         for(var i=0;i<divs.length - 1;i++){
 97             divs[i].index = i;
 98             divs[i].onclick = function(){
 99                 for(var i = 0;i < divs.length;i++){
100                     //当第i个div被点击，其他div的角度
101                     if(this.index > i){
102                         divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72+10)+"deg)";
103                     }
104                     if( this.index < i){
105                         divs[i].style.transform = "rotate("+(342-(i*15) + this.index*15-72-10)+"deg)";
106                     }
107                 }
108                 //被点击div的角度
109                 divs[this.index].style.transform = "rotate("+(342-(this.index*15) + this.index*15-72)+"deg)";
110                 
111             }
112         }
113 
114         //点击最后一个图片，合并扇形
115         divs[9].onclick = function(){
116             if(jilu){
117                 back();
118             }
119             else{
120                 go();
121             }
122             jilu = !jilu;
123             
124         }
125 
126         //使扇形打开
127         function go(){
128             for(var i = 0;i<divs.length;i++){
129                 //"rotate("+345-(i*15)+"deg)"
130                 //不行，因为这样会先算"rotate("+345
131                 divs[i].style.transform = "rotate("+(342-(i*15))+"deg)";
132             }
133         }
134         //是扇形合并
135         function back(){
136             for(var i=0;i<divs.length;i++){
137                 divs[i].style.transform = "rotate(0deg)";
138             }
139         }
140     }
141 
142 
143     </script>
144 </body>
145 </html>