JavaScript中transform实现数字翻页效果
更新时间:2017年03月08日 11:56:53 作者:留白snow
本文主要介绍JavaScript中利用transform实现数字翻页效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
图(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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
bootstrap table插件的分页与checkbox使用详解
这篇文章主要为大家详细介绍了bootstrap table插件的分页与checkbox使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
最新评论