註:本實例JS部分均以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫 先上效果圖:(樣式有點醜,可以忽略一下下,效果出來了就好,後期加到其他項目中方便更改0.0) 類似翻書效果,原本的意思是使用JS來控制的,點擊一次之後使用setInterval去控制書頁翻過去的動畫,當書頁翻轉1 ...
註:本實例JS部分均以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫
先上效果圖:(樣式有點醜,可以忽略一下下,效果出來了就好,後期加到其他項目中方便更改0.0)
類似翻書效果,原本的意思是使用JS來控制的,點擊一次之後使用setInterval去控制書頁翻過去的動畫,當書頁翻轉180°之後,清除掉setInterval,但當我連續點擊,那之前沒有翻轉180°的書頁將無法繼續完成之前的動作,可以用清除setInterval的方式,但總感覺動畫效果不好,當然還有其他解決辦法,但突然想到,CSS3為我們提供了animation,我們為什麼不去使用使用呢,只要為加上animation動畫就可以直接避免這個問題,animation動畫預設是每次都執行完動畫,所以,當出現連點的時候,就會像圖中看到的那樣,每一頁都自然翻頁,下麵貼上代碼,及實現步驟:
html部分:(這部分真心·····,算了,醜就醜點吧~.~)
<body> <!-- 所展示的書的內容 --> <div class="book"> <div class="page"> <span>1</span> <span>2</span> </div> <div class="page"> <span>3</span> <span>4</span> </div> <div class="page"> <span>5</span> <span>6</span> </div> <div class="page"> <span>7</span> <span>8</span> </div> <div class="page"> <span>9</span> <span>10</span> </div> <div class="page"> <span>11</span> <span>12</span> </div> <div class="page"> <span>13</span> <span>14</span> </div> <div class="page"> <span>15</span> <span>16</span> </div> <div class="page"> <span>17</span> <span>18</span> </div> <div class="page"> <span>19</span> <span>20</span> </div> </div> <!-- 用來控制上一頁和下一頁操作 --> <input type="button" value="上一頁" id="before"/> <input type="button" value="下一頁" id="after"/> </body>
CSS部分:(通過改變transform中rotatey的值,來實現書頁的翻轉效果)
1 <style> 2 .book{ 3 width: 460px; 4 height: 300px; 5 position: relative; 6 margin: 150px 400px; 7 -webkit-transform-style: preserve-3d; 8 -moz-transform-style: preserve-3d; 9 -ms-transform-style: preserve-3d; 10 transform-style: preserve-3d; 11 transform: rotatex(30deg); 12 } 13 .page{ 14 width: 230px; 15 height: 300px; 16 17 border: 1px solid #666; 18 position: absolute; 19 right: 0; 20 transform-origin: left; 21 transform-style: preserve-3d; 22 backface-visibility:hidden; 23 font-size: 60px; 24 text-align: center; 25 line-height: 300px; 26 } 27 .page span{ 28 display: block; 29 width: 100%; 30 position: absolute; 31 background-color: #00FFFF; 32 } 33 .page span:nth-child(2){ 34 transform: rotatey(-180deg); 35 backface-visibility:hidden; 36 } 37 38 39 /*以下兩個動畫可以只使用第一個,animation中有reverse,可以反向執行動畫, 40 使用時需要在JS中點擊上一頁時添加改屬性值*/ 41 /*翻書下一頁的動畫*/ 42 @keyframes page { 43 0%{ 44 transform: rotatey(0deg); 45 } 46 100%{ 47 transform: rotatey(-180deg); 48 z-index: 10; 49 } 50 } 51 /*翻書上一頁的動畫*/ 52 @keyframes page1 { 53 0%{ 54 transform: rotatey(-180deg); 55 z-index: 10; 56 } 57 100%{ 58 transform: rotatey(0deg); 59 } 60 } 61 62 </style>
JS部分(JS部分主要實現點擊上/下一頁時,為相應的div添加animation屬性)
1 <script> 2 var before = document.querySelector("#before"); 3 var after = document.querySelector("#after"); 4 var book = document.querySelector(".book"); 5 var page = document.getElementsByClassName("page"); 7 rotate(); 8 9 function rotate(){ 10 var middle = 0;12 for(var z=0;z<book.children.length;z++){ 13 page[z].style.zIndex = book.children.length-z; 14 } 15 after.onclick = function(){ 16 if(middle != book.children.length){ 17 page[middle].style.animation = "page 1.5s linear 1 forwards"; 18 middle++; 19 }else{ 20 middle = book.children.length; 21 } 22 }; 23 before.onclick = function(){ 24 if(middle != 0){ 25 page[middle-1].style.animation = "page1 1.5s linear 1 forwards"; 26 middle--; 27 }else{ 28 middle = 0; 29 } 30 } 31 } 32 </script>
關於最後JS部分,主要作用在於,當點擊上/下一頁時,為相應的div添加animation屬性,具體animation的詳解,還是需要查看API。
介於相容性的問題,這裡比較好的解決辦法是添加class,而不是去添加animation,為適應更多瀏覽器,需要添加首碼-webkit-、-moz-·······,所以在一個類中寫好這些東西,直接添加類就可以了,或者寫一個函數,封裝好,能直接輸出需要的字元串就好。