原生js如何实现图片翻转旋转效果？
一、总结
1、通过给元素设置style中的transition来实现的。
2、我昨天纠结的效果全部可以通过精读这个代码后实现。
二、原生js如何实现图片翻转旋转效果？
1、效果图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #imgWrap { 8 width: 800px; 9 height: 350px; 10 margin: 80px auto; 11 perspective: 800px; 12 } 13 14 #imgWrap img { 15 float: left; 16 height: 80px; 17 width: 80px; 18 border: 1px solid #eee; 19 } 20 21 #btn { 22 width: 100px; 23 text-align: center; 24 font: 16px/40px Arial, Verdana; 25 color: #fff; 26 padding: 0 20px; 27 background: rgb(0, 100, 0); 28 margin: 0 auto; 29 border-radius: 5px; 30 cursor: pointer; 31 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 32 } 33 </style> 34 <script type="text/javascript"> 35 /* 36 * 1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的） 37 * 2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始） 38 * 3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始） 39 */ 40 window.onload = function () { 41 var btn = document.getElementById('btn'); 42 var imgs = document.querySelectorAll('img'); 43 var allEnd = 0;//用来判断所有的图片是否都完成了所有的运动步骤 44 var on = true;//用来决定用户是否可以再次点击 45 46 //给btn添加点击事件 47 btn.onclick = function () { 48 console.log("on:" + on); 49 if (!on) { 50 return; 51 } 52 on = false; 53 var endNum = 0;//运动完成的图片数量 54 55 for (var i = 0; i < imgs.length; i++) { 56 //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值 57 (function (i) { 58 setTimeout(function () { 59 montion(imgs[i], '10ms', function () { 60 this.style.transform = 'scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i] 61 }, function () { 62 //第二步的运动从这里开始 63 montion(this, '1s', function () { 64 this.style.transform = "scale(1)"; 65 this.style.opacity = 0; 66 }, function () { 67 endNum++;//只要有一张图片完成了第二步，则加1 68 if (endNum === imgs.length) { 69 toBig(); 70 } 71 }) 72 }); 73 }, Math.random() * 1000); 74 })(i); 75 76 } 77 //定时器，用来延迟时间，不让图片同步所放 78 }; 79 80 //第三个运动效果 81 function toBig() { 82 /* 83 *坐标轴，x,y,z 84 */ 85 for (var i = 0; i < imgs.length; i++) { 86 imgs[i].style.transition = ''; 87 // imgs[i].style.opacity='1'; 88 //想要一个物体有css3中的动作变化，那就需要给它一个初始值 89 imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)'; 90 //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i 91 (function (i) { 92 setTimeout(function () { 93 montion(imgs[i], '2s', function () { 94 this.style.opacity = 1; 95 this.style.transform = 'rotateY(-360deg) translateZ(0)' 96 }, function () { 97 allEnd++; 98 if (allEnd === imgs.length) { 99 console.log("allEnd:" + allEnd + ',imgs.length:' + imgs.length); 100 //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击 101 //当所有运动完了以后，才允许再次点击 102 on = true; 103 allEnd = 0; 104 } 105 }); 106 }, Math.random() * 1000); 107 })(i); 108 } 109 } 110 111 //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情) 112 function montion(obj, time, doFn, callBack) { 113 obj.style.transition = time; 114 doFn.call(obj);//调用函数，并且把this的指向给obj 115 116 var called = false;//这里的原因是为了解决transitionend调用多次的bug 117 118 obj.addEventListener('transitionend', function () { 119 if (!called) { 120 callBack && callBack.call(obj);//解决如果没有传入第四个callBack参数的问题 121 called = true; 122 } 123 124 }, false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段 125 } 126 } 127 </script> 128 </head> 129 <body> 130 <div id="imgWrap"> 131 <img src="https://dummyimage.com/1:1x100&text=1" alt=""> 132 <img src="https://dummyimage.com/1:1x100&text=2" alt=""> 133 <img src="https://dummyimage.com/1:1x100&text=3" alt=""> 134 <img src="https://dummyimage.com/1:1x100&text=4" alt=""> 135 <img src="https://dummyimage.com/1:1x100&text=5" alt=""> 136 <img src="https://dummyimage.com/1:1x100&text=6" alt=""> 137 <img src="https://dummyimage.com/1:1x100&text=7" alt=""> 138 <img src="https://dummyimage.com/1:1x100&text=8" alt=""> 139 <img src="https://dummyimage.com/1:1x100&text=9" alt=""> 140 <img src="https://dummyimage.com/1:1x100&text=10" alt=""> 141 <img src="https://dummyimage.com/1:1x100&text=11" alt=""> 142 <img src="https://dummyimage.com/1:1x100&text=12" alt=""> 143 <img src="https://dummyimage.com/1:1x100&text=13" alt=""> 144 <img src="https://dummyimage.com/1:1x100&text=14" alt=""> 145 <img src="https://dummyimage.com/1:1x100&text=15" alt=""> 146 <img src="https://dummyimage.com/1:1x100&text=16" alt=""> 147 <img src="https://dummyimage.com/1:1x100&text=17" alt=""> 148 <img src="https://dummyimage.com/1:1x100&text=18" alt=""> 149 <img src="https://dummyimage.com/1:1x100&text=19" alt=""> 150 <img src="https://dummyimage.com/1:1x100&text=20" alt=""> 151 <img src="https://dummyimage.com/1:1x100&text=21" alt=""> 152 <img src="https://dummyimage.com/1:1x100&text=22" alt=""> 153 <img src="https://dummyimage.com/1:1x100&text=23" alt=""> 154 <img src="https://dummyimage.com/1:1x100&text=24" alt=""> 155 <img src="https://dummyimage.com/1:1x100&text=25" alt=""> 156 <img src="https://dummyimage.com/1:1x100&text=26" alt=""> 157 <img src="https://dummyimage.com/1:1x100&text=27" alt=""> 158 <img src="https://dummyimage.com/1:1x100&text=28" alt=""> 159 <img src="https://dummyimage.com/1:1x100&text=29" alt=""> 160 <img src="https://dummyimage.com/1:1x100&text=30" alt=""> 161 <img src="https://dummyimage.com/1:1x100&text=31" alt=""> 162 <img src="https://dummyimage.com/1:1x100&text=32" alt=""> 163 <img src="https://dummyimage.com/1:1x100&text=33" alt=""> 164 <img src="https://dummyimage.com/1:1x100&text=34" alt=""> 165 <img src="https://dummyimage.com/1:1x100&text=35" alt=""> 166 <img src="https://dummyimage.com/1:1x100&text=36" alt=""> 167 <img src="https://dummyimage.com/1:1x100&text=37" alt=""> 168 <img src="https://dummyimage.com/1:1x100&text=38" alt=""> 169 <img src="https://dummyimage.com/1:1x100&text=39" alt=""> 170 <img src="https://dummyimage.com/1:1x100&text=40" alt=""> 171 <img src="https://dummyimage.com/1:1x100&text=41" alt=""> 172 <img src="https://dummyimage.com/1:1x100&text=42" alt=""> 173 <img src="https://dummyimage.com/1:1x100&text=43" alt=""> 174 <img src="https://dummyimage.com/1:1x100&text=44" alt=""> 175 <img src="https://dummyimage.com/1:1x100&text=45" alt=""> 176 </div> 177 <div id="btn">点击查看效果</div> 178 </body> 179 </html>
三、测试题-简答题
1、js代码可以加到head标题里面么？
解答：可以。加到window的onload方法里面。
2、js代码加到head标签里面怎么样才能获取到元素？
解答：代码写到window的onload里面。 window.onload = function () {} 。
3、如何实现一个函数在另外一个函数执行完成后执行？
解答：不停的判断上一个函数里面的元素是否准备就绪，如果所有元素都准备就绪，if成立就执行函数。