原生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成立就執行函數。