為什么我的代碼我檢查了幾遍，還是沒有翻頁(yè)的效果，麻煩哪位幫幫我，而且我不知道為什么翻頁(yè)的默認(rèn)數(shù)字是3，不應(yīng)該curIndex的值是1頁(yè)面最初默認(rèn)顯示的是page1的內(nèi)容1嗎？<!DOCTYPE html><html><head> <title>制作翻頁(yè)效果</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>
關(guān)于CSS3實(shí)現(xiàn)翻頁(yè)特效
qq_風(fēng)雨中堅(jiān)強(qiáng)_0
2016-04-16 22:45:20
