標籤：return ase box 操作 pre lis height win 順序
用css3效果做了一個顆粒翻頁效果，布局上，一張圖片做底層，在這張圖片上用js建立一層小的行和列各為r和c的小span，給這些span分別設定background-position；用來覆蓋原來的一張圖片（建立span的時候利用DOM操作，利用兩個迴圈分別建立行和列，然後在迴圈中建立元素和設定元素css屬性）；然後在點擊的時候添加事件，使用transform設定翻轉效果，這裡，我們可以設定逐個翻轉和斜線翻轉（斜線翻轉利用的是span的行和列相加值相等原理）；這裡需要注意的是設定圖片播放順序，span上的圖片永遠比下面div的整張圖片小一級，並且在更換圖片的完成的時候瞬時間更換span和div的圖片，使之繼續符合上述的圖片層級，這個時間差，人眼是無法識別的。
大體我的思路就是這樣，寫的不是很清楚，現在想來，做一個合格的優秀的程式員，語言表達確實是比較重要的，因為分享和學習才是一個人不斷進步的基礎。
話不多說，直接上代碼，希望大家一起分享一起進步
<!DOCTYPE html><html><head><meta charset="utf-8"><title>顆粒翻轉</title><style> *{margin:0;padding:0;} #box{width:700px; height: 400px; margin:50px auto; position: relative; } #box span{ position: absolute; width: 100%; height: 100%; transition:1s all ease; transform:rotateY(0deg); transform-style:preserve-3d; } #box span em{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #box .front{ background-image: url("img/0.jpg"); transform:translateZ(1px); } #box .back{ background-image: url("img/1.jpg"); transform:translateZ(-1px) scale(-1,1); } #box:active span{ /*transform:rotateY(180deg);*/ }</style><script> window.onload = function(){ var oBox = document.getElementById(‘box‘); var C = 7; var R = 4; for(var r = 0;r<R;r++){ for(var c = 0;c<C;c++){ var oSpan = document.createElement(‘span‘); oSpan.style.width = oBox.offsetWidth/C +‘px‘; oSpan.style.height = oBox.offsetHeight/R +‘px‘; oSpan.style.left = oBox.offsetWidth/C*c+‘px‘; oSpan.style.top = oBox.offsetHeight/R*r+‘px‘; oSpan.innerHTML =‘<em class="front"></em><em class="back"></em>‘; oBox.appendChild(oSpan); oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+‘px ‘+-oSpan.offsetTop+‘px‘; oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+‘px ‘+-oSpan.offsetTop+‘px‘; oSpan.r = r; oSpan.c = c; } } var iNow=0; var bReady = true; oBox.onclick = function(){ if(bReady==false){return;} bReady = false; iNow++; var aSpan = oBox.children; for(var i = 0;i<aSpan.length;i++){ aSpan[i].style.transition = ‘1s all ease ‘+100*(aSpan[i].r+aSpan[i].c)+‘ms‘; aSpan[i].style.transform =‘rotateY(180deg)‘; } //換圖 aSpan[aSpan.length-1].addEventListener(‘transitionend‘,function(){ bReady = true; for(var i = 0;i<aSpan.length;i++){ aSpan[i].style.transition = ‘none‘; aSpan[i].style.transform =‘rotateY(0deg)‘; aSpan[i].children[0].style.backgroundImage =‘url("img/‘+(iNow%3)+‘.jpg")‘; aSpan[i].children[1].style.backgroundImage =‘url("img/‘+(iNow+1)%3+‘.jpg")‘; } },false) }; };</script></head><body> <div id="box"> </div></body></html>
顆粒翻頁（css3效果展示）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
