我的數字居然從六開始,只有1和六。我對比一下代碼,是一樣的,為什么顯示的結果卻不一樣呢?
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"> <title></title> <style> #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:#000; color:#fff; line-height:360px; font-size:360px; font-weight:bold; text-align:center; 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{text-align:center;?margin:?40px?auto;} </style> ??? <script?type="text/javascript"> ????var?curIndex?=?1; ? ??function?next(){ ???????if(?curIndex?==?6?){???return;} ????????????? ??var?curPage?=?document.getElementById("page"+curIndex); ??curPage.style.webkitTransform?=?"rotateX(-90deg)"; ??? ?? ??curIndex?++; ??var?nextPage?=?document.getElementById("page"+curIndex); ??nextPage.style.webkitTransform?=?"rotateX(0deg)"; ??} ??function?prev(){ ????if(?curIndex?==?1?){return;} ??var?curPage?=?document.getElementById("page"+curIndex); ??curPage.style.webkitTransform?=?"rotateX(90deg)"; ?? ??curIndex?--; ??var?prevPage?=?document.getElementById("page"+curIndex); ??prevPage.style.webkitTransform?=?"rotateX(0deg)"; ??} </script> </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()">previous</a> ????</div> </body> </html>
2014-12-19
這里寫錯了,#page6后面多個逗號!