1-----6翻對的，6---1翻頁，沒翻一頁總會回到最后一頁？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? ??
? ? ? ? #my3dspace {
? ? ? ? ? ? -webkit-perspective: 800;
? ? ? ? ? ? -webkit-perspective-origin: 50% 50%;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* overflow:hidden; ?
? ? ? ? }
? ? ? ? #page {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? /*采用3d效果*/
? ? ? ? ? ? -webkit-transform-style: preserve-3d;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? /* position:relative; ?
? ? ? ? }
? ? ? ? .page {
? ? ? ? ? ? width: 360px;
? ? ? ? ? ? height: 360px;
? ? ? ? ? ? padding: 20px;
? ? ? ? ? ? font-weight:bold;
? ? ? ? ? ? line-height:360px;
? ? ? ? ? ? background-color: #000;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-size: 360px;
? ? ? ? ? ? font-family: 'Adobe Heiti Std';
? ? ? ? ? ? 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: 0 auto;
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? var curindex = 1;
? ? ? ? function next() {
? ? ? ? ? ? if (curindex == 6)
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? var cutpage = document.getElementById("page" + curindex);
? ? ? ? ? ? cutpage.style.transform = "rotateX(-90deg)";
? ? ? ? ? ? curindex++;
? ? ? ? ? ? var nextpage = document.getElementById("page" + curindex);
? ? ? ? ? ? nextpage.style.transform = "rotateX(0deg)";
? ? ? ? }
? ? ? ? function pre() {
? ? ? ? ? ? if (curindex == 1)
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? var cutpage = document.getElementById("page" + curindex);
? ? ? ? ? ? cutpage.style.webkitTransform = "rotaeX(90deg)";
? ? ? ? ? ? curindex--;
? ? ? ? ? ? var prepage = document.getElementById("page" + curindex);
? ? ? ? ? ? prepage.style.webkitTransform = "rotateX(0deg)";
? ? ? ? }
? ? </script>
</head>
<body>
? ? <div id="my3dspace">
? ? ? ? <div id="page">
? ? ? ? ? ? <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:pre()">pre</a>
? ? </div>
</body>
</html>
2016-07-24
神啊，少個t都能看出來。
我以為想的跟我一樣啊，能不能做成1到6之后，按next回到1，反復循環怎么實現？？
2016-07-23
function pre() {
? ? ? ? ? ? if (curindex == 1)
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? var cutpage = document.getElementById("page" + curindex);
? ? ? ? ? ? cutpage.style.webkitTransform = "rotaeX(90deg)";
? ? ? ? ? ? curindex--;
? ? ? ? ? ? var prepage = document.getElementById("page" + curindex);
? ? ? ? ? ? prepage.style.webkitTransform = "rotateX(0deg)";
? ? ? ? }
少打了一個字母t
2016-07-21
代碼是正確的 ? 是不是瀏覽器的問題