首页 > 代码库 > 扇形展开效果
扇形展开效果
学习了妙味课堂扇形展开效果
点击这里预览
知识点预备：
【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 width: 1200px; 16 height: 700px; 17 background: url(img/bg.png) no-repeat; 18 position: relative; 19 margin: 100px auto; 20 } 21 #box div{ 22 width: 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>
扇形展开效果