為什么我的代碼我檢查了幾遍，還是沒有翻頁的效果，麻煩哪位幫幫我，而且我不知道為什么翻頁的默認數字是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>
關于CSS3實現翻頁特效
qq_風雨中堅強_0
2016-04-16 22:45:20
