学习妙味课堂的展示页效果
效果预览：展示页
知识点预备：
【1】transform-style属性
transform-style属性指定了它的子元素看起来是存在3D空间中，还是存在2D空间中，如果存在2D空间中，则它的子元素不能存在3D中。
注意：因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。
语法：transform-style: flat | preserve-3d
preserve-3d指定子元素定位在三维空间内
flat指定子元素位于此元素所在平面内。
【2】perspective属性
MDN官方文档说明：
perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
举栗子：
1 <style> 2 #wrap{ 3 4 position: relative; 5 } 6 #wrap img{ 7 position: absolute; 8 top: 100px; 9 left: 400px; 10 transform: rotateY(40deg); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="wrap"> 16 <img src="img/0.png" /> 17 18 </div> 19 20 21 </body>
效果：
这里我们没有设置perspective属性看不到什么变化，那我们将这个属性加上看看有什么变化
代码：
1 <style> 2 #wrap{ 3 perspective: 1200px; 4 position: relative; 5 } 6 #wrap img{ 7 position: absolute; 8 top: 100px; 9 left: 400px; 10 transform: rotateY(40deg); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="wrap"> 16 <img src="img/0.png" /> 17 18 </div> 19 </body>
效果：
可以看到有很大的变化。难道第一张图片没有旋转吗？不，它旋转了，只是离得我们太远看不到而已。设置perspective这个属性就是将镜头拉到一定距离。
【3】transition属性
语法：transition: property duration timing-function delay;
详细解析：留个位置（这两天会为transition属性单独写一个博客）
我们这里用到了 duration 和 timing-function 。
1 transition: .7s ease-in-out;
意思是这个元素的的动画花费0.7s，并且慢速开始，慢速结束。
准备工作完毕，开始正式写代码
第一步
写基本的结构和样式，直接看代码
1 <style> 2 body{ 3 margin: 0; 4 background-color: #999; 5 } 6 #wrap{ 7 height: 500px; 8 background: url(img/bg.png) no-repeat center; 9 background-size: 1800px 500px; 10 position: relative; 11 transform-style: preserve-3d; 12 perspective: 800px; 13 margin-top: 100px; 14 } 15 img{ 16 border: none; 17 /*垂直对齐方式*/ 18 vertical-align: top; 19 } 20 #wrap img{ 21 width: 300px; 22 height: 200px; 23 position: absolute; 24 left: 50%; 25 top: 50%; 26 margin-left: -150px; 27 margin-top: -100px; 28 transition: .7s ease-in-out; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="wrap"> 34 <img src = "img/0.png"> 35 <img src = "img/1.png"> 36 <img src = "img/2.png"> 37 <img src = "img/3.png"> 38 <img src = "img/4.png"> 39 <img src = "img/5.png"> 40 <img src = "img/6.png"> 41 </div> 42 </body>
第二步：
写tab()函数，这个函数的作用接受一个n值，并根据这个n值来设置每个图片的位置和样式。
先来看看设置的变量
1 var imgs = document.getElementsByTagName('img'); 2 //默认的最中间的图片的序号 3 var now = 3; 4 //你想要看的图片的序号，即鼠标点击的图片序号 5 var target = 0; 6 //开关，设置它是为了让用户点击一个图片后要等到这个动画效果完成后，才可以继续点击 7 var onoff = true;
tab()函数
1 function tab(n){ 2 //除了最中间的每边都有三个div，他们都是对称的，所以只循环三次 3 for(var i = 0;i < 3;i++){ 4 5 var Left = n - 1 - i; 6 // 如果是这样的情况 4 5 6 0 1 2 3 7 if(Left < 0){ 8 Left = Left + 7; 9 } 10 //给左边的div设置位置 11 imgs[Left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)" 12 13 var Right = n + 1 + i; 14 // 如果是这样的情况 3 4 5 6 0 1 2 15 if(Right > 6){ 16 Right = Right - 7; 17 } 18 //给右边的div设置位置 19 imgs[Right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)" 20 } 21 //最中间的div设置它的Z轴距离，使它到最前面 22 imgs[n].style.transform = "translateZ(300px)"; 23 }
代码不难就是修改一些CSS3中的属性
第三步
当你点击一个图片时，这个图片运动到到最中间的位置有两种方法：goNext()和goPrev()
1 //向后切换图片 2 function goNext(){ 3 now ++; 4 //如果中间的图片时最后一张，它的下一张是第一张 5 if(now > 6){ 6 now =0; 7 } 8 tab(now); 9 //切换完成，结束函数 10 if(now == target){ 11 //切换完成，用户可以点击图片 12 onoff = true; 13 return; 14 } 15 //如果没有到点击的图片时，继续向后走 16 setTimeout(function(){ 17 goNext(); 18 },1000); 19 } 20 21 //向前切换图片 22 function goPrev(){ 23 now --; 24 //如果中间的图片是第一张，它的上一张是第六张 25 if(now < 0){ 26 now = 6; 27 } 28 tab(now); 29 //切换完成，结束函数 30 if(now == target){ 31 //切换完成，用户可以点击图片 32 onoff = true; 33 return; 34 } 35 //如果没有到点击的图片时，继续向前走 36 setTimeout(function(){ 37 goPrev(); 38 },1000); 39 }
第四步
写if语句来判断被点击的图片用那种方式到最中间的位置
1 for(var i = 0;i < imgs.length;i++){ 2 imgs[i].index = i; 3 imgs[i].onclick = function(){ 4 if(!onoff){ 5 return; 6 } 7 onoff = false; 8 target = this.index; 9 if(target > now){ 10 if(target - now <= 3){ 11 goNext(); 12 } 13 else{ 14 goPrev(); 15 } 16 } 17 if(target < now){ 18 if(now - target <= 3){ 19 goPrev(); 20 }else{ 21 goNext(); 22 } 23 } 24 25 } 26 }
第五步
第五步应该是写开关，因为第四步基本效果已经完成了。但是还是有一个小bug，就是在图片切换过程中如果继续点击图片，整个图片的布局会变。所以引入开关，不让用户在动画还未完成前点击。
总结：难度不大，对CSS3中的属性不熟悉。对如何选择goNext()或者goPrve()绕了一会，最后在纸上画出各种情况后才懂。
源码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 margin: 0; 9 background-color: #999; 10 } 11 #wrap{ 12 height: 500px; 13 background: url(img/bg.png) no-repeat center; 14 background-size: 1800px 500px; 15 position: relative; 16 transform-style: preserve-3d; 17 perspective: 800px; 18 margin-top: 100px; 19 } 20 img{ 21 border: none; 22 /*垂直对齐方式*/ 23 vertical-align: top; 24 } 25 #wrap img{ 26 300px; 27 height: 200px; 28 position: absolute; 29 left: 50%; 30 top: 50%; 31 margin-left: -150px; 32 margin-top: -100px; 33 transition: .7s ease-in-out; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="wrap"> 39 <img src = "img/0.png"> 40 <img src = "img/1.png"> 41 <img src = "img/2.png"> 42 <img src = "img/3.png"> 43 <img src = "img/4.png"> 44 <img src = "img/5.png"> 45 <img src = "img/6.png"> 46 </div> 47 <script> 48 var imgs = document.getElementsByTagName('img'); 49 //默认的最中间的图片的序号 50 var now = 3; 51 //你想要看的图片的序号，即鼠标点击的图片序号 52 var target = 0; 53 //开关，设置它是为了让用户点击一个图片后要等到这个动画效果完成后，才可以继续点击 54 var onoff = true; 55 56 setTimeout(function(){ 57 tab(now); 58 },100); 59 60 61 for(var i = 0;i < imgs.length;i++){ 62 imgs[i].index = i; 63 imgs[i].onclick = function(){ 64 if(!onoff){ 65 return; 66 } 67 onoff = false; 68 target = this.index; 69 if(target > now){ 70 if(target - now <= 3){ 71 goNext(); 72 } 73 else{ 74 goPrev(); 75 } 76 } 77 if(target < now){ 78 if(now - target <= 3){ 79 goPrev(); 80 }else{ 81 goNext(); 82 } 83 } 84 85 } 86 } 87 88 // 0 1 2 3 4 5 6 89 function tab(n){ 90 //除了最中间的每边都有三个div，他们都是对称的，所以只循环三次 91 for(var i = 0;i < 3;i++){ 92 93 var Left = n - 1 - i; 94 // 4 5 6 0 1 2 3 95 if(Left < 0){ 96 Left = Left + 7; 97 } 98 //给左边的div设置位置 99 imgs[Left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)" 100 101 var Right = n + 1 + i; 102 // 3 4 5 6 0 1 2 103 if(Right > 6){ 104 Right = Right - 7; 105 } 106 //给右边的div设置位置 107 imgs[Right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)" 108 } 109 //最中间的div设置它的Z轴距离，使它到最前面 110 imgs[n].style.transform = "translateZ(300px)"; 111 } 112 113 //向后切换图片 114 function goNext(){ 115 now ++; 116 //中间的图片时最后一张，它的下一张是第一张 117 if(now > 6){ 118 now =0; 119 } 120 tab(now); 121 //切换完成，结束函数 122 if(now == target){ 123 //切换完成，用户可以点击图片 124 onoff = true; 125 return; 126 } 127 //如果没有到想看的图片时，继续向后走 128 setTimeout(function(){ 129 goNext(); 130 },1000); 131 } 132 133 //向前切换图片 134 function goPrev(){ 135 now --; 136 //中间的图片是第一张，它的上一张是第六张 137 if(now < 0){ 138 now = 6; 139 } 140 tab(now); 141 //切换完成，结束函数 142 if(now == target){ 143 //切换完成，用户可以点击图片 144 onoff = true; 145 return; 146 } 147 //如果没有到想看的图片时，继续向前走 148 setTimeout(function(){ 149 goPrev(); 150 },1000); 151 } 152 </script> 153 </body> 154 </html>