为什么我的代码我检查了几遍，还是没有翻页的效果，麻烦哪位帮帮我，而且我不知道为什么翻页的默认数字是3，不应该curIndex的值是1页面最初默认显示的是page1的内容1吗？<!DOCTYPE html><html><head> <title>制作翻页效果</title> <style type="text/css"> #my3dpage{ -webkit-perspective:800px; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width:400px; height:400px; margin:0px auto; position: relative; -webkit-transform-style:preserve-3d; } .page{ width: 360px; height: 360px; padding: 20px; line-height: 360px; text-align: center; font-weight: bold; font-size: 360px; background-color: black; color: white; position: absolute; } #page1{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; } #page2,#page3,#page4,#page5,#page6{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; -webkit-transform:rotateX(90deg); } #op{ margin: 0 auto; text-align: center; } </style> <script type="text/javascript"> var curIndex=1; if (curIndex==6) { return; } function next(){ var curIndex=document.getElementsById("pag"+curIndex); curIndex.style.webkitTransform="rotateX(-90deg)"; curIndex++; var nextpage=document.getElementsById("page"+curIndex); nextpage.style.webkitTransform="rotateX(0deg)"; } if (curIndex==1) { return; } function pre(){ var curIndex=document.getElementsById("page"+curIndex); curIndex.style.webkitTransform="rotateX(90deg)"; curIndex--; var prepage=document.getElementsById("page"+curIndex); prepage.style.webkitTransform="rotateX(0deg)" } </script></head><body><div id="my3dpage"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="pagz3">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:pre()">previous</a></div></body></html>
- 1 回答
- 2 关注
- 1474 浏览
添加回答
举报
0/150
提交
取消