css3和js模拟翻页效果代码实例
分类:实例代码
本章节分享一段代码实例,它模拟实现了翻页效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #container { width: 500px; height: 500px; margin: 20px auto; background: #ff0000; -moz-transition: background 2s,width 2s,height 2s; -o-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()">next</a> <a href="javascript:prev()">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>
css3和js模拟翻页效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css3和js模拟翻页效果代码实例就介绍到这了。
css3和js模拟翻页效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。