JavaScript中transform實現(xiàn)數(shù)字翻頁效果
更新時間:2017年03月08日 11:56:53 作者:留白snow
本文主要介紹JavaScript中利用transform實現(xiàn)數(shù)字翻頁效果的實例,具有很好的參考價值。下面跟著小編一起來看下吧
效果圖:
圖(1)初始圖
圖(2)翻頁過程
圖(3)翻頁結果
代碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style> #container{ width:500px; height:500px; margin:20px auto; background:#ff0000; -webkit-transiton:background 2s linear,width 2s,height 2s; -moz-transition:background 2s,width 2s,height 2s; -o-transition:background 2s,width 2s,height 2s; -ms-transition:background 2s,width 2s,height 2s; transition:background 2s,width 2s,height 2s; } #container:hover{ background: #00ff00;width:200px;height: 200px;} #my3dspace{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background-color: black; color: white; font-size: 360px; font-weight: blod; line-height: 360px; text-align: center; position: absolute; } #page1{ -webkit-transform-origin:top; transform-origin:top; -webkit-transition:-webkit-transform 1s linear; transition:transform 1s linear; } #page2,#page3,#page4,#page5,#page6{ -webkit-transform-origin:top; transform-origin:top; -webkit-transition:-webkit-transform 1s linear; transition:transform 1s linear; -webkit-transform:rotateX(-90deg); transform:rotateX(-90deg); } #op{ text-align: center; margin: 40px auto; } </style> </head> <body> <div id="my3dspace"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div> </div> <div id="op"> <a href="javascript:next()" rel="external nofollow" >next</a> <a href="javascript:prev()" rel="external nofollow" >prev</a> </div> <script type="text/javascript"> var curIndex = 1; function next(){ if(curIndex==6) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; curPage.style.transform = "rotateX(90deg)"; curIndex ++; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform="rotateX(0deg)"; nextPage.style.transform="rotateX(0deg)"; } function prev(){ if(curIndex==1) return; var curPage =document.getElementById("page"+curIndex); curPage.style.webkitTransform="rotateX(-90deg)"; curPage.style.transform="rotateX(-90deg)"; curIndex --; var prevPage = document.getElementById("page"+curIndex); prevPage.style.webkitTransform="rotateX(0deg)"; prevPage.style.transform="rotateX(0deg)"; } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題,對此感興趣的同學,可以實驗一下,以便解決平時遇到的一些奇怪的問題。2021-05-05JavaScript判斷一個字符串是否包含指定子字符串的方法
這篇文章主要介紹了JavaScript判斷一個字符串是否包含指定子字符串的方法,實例分析了javascript字符串操作的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03