问答详情
源自：3-2 JS部分

求老师解答改成翻书效果后出现问题 数字都乱了！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#win{
    -moz-perspective:800px;
    -ms-perspective:800px;
    -webkit-perspective:800px;
    -moz-perspective-origin:50% 65%;
    -ms-perspective-origin:50% 65%;
    -webkit-perspective-origin:50% 65%;
    overflow:hidden;}
#pagecontent{
    width:400px;
    height:400px;
    margin:0 auto;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    position:relative;
    }
.page{
    width:360px;
    height:360px;
    padding:20px;
    font-weight:bold;
    font-size:300px;
    color:#F00;
    background-color:#000;
    text-align:center;
    position:absolute;}
#page1{
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transition:transform 1s linear;
    -ms-transition:transform 1s linear;
    -webkit-transition:transform 1s linear;}
#page2,#page3,#page4,#page5,#page6{
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -webkit-transform-origin:left;
    /*-moz-transform:rotateY(90deg);
    -ms-transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg);*/
    -moz-transition:transform 1s linear;
    -ms-transition:transform 1s linear;
    -webkit-transition:transform 1s linear;}
#ope{
    text-align:center;
    margin-top:100px;}
</style>
<script>
var curNum=1;
function next(){
    if(curNum==6)
    {return;
    alert("已经是最后一页了！");}
    var curPage=document.getElementById("page"+curNum);
    curPage.style.moztransform="rotateY(-180deg)";
    curPage.style.transform="rotateY(-180deg)";
    curNum++;
    var nextPage=document.getElementById("page"+curNum);
    nextPage.style.transform="rotateY(-180deg)";
    }
function previous(){
    if(curNum==1)
    {return;
    alert("已经是最前一页了！");}
    /*var curPage=document.getElementById("page"+curNum);*/
    /*curPage.style.transform="rotateY(90deg)";*/
    curNum--;
    var prePage=document.getElementById("page"+curNum);
    prePage.style.transform="rotateY(0deg)";
    }
</script>
</head>

<body>
<div id="win">
   <div id="pagecontent">
      <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 id="ope">
      <input type="button" value="下一个" onclick="next()" />
      <input type="button" value="上一个" onclick="previous()" />
   </div>
</div>
</body>
</html>

提问者：各种各种各种 2015-10-12 09:46

个回答

  • _Doogie
    2016-03-05 13:32:12

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#win{
    -moz-perspective:800px;
    -ms-perspective:800px;
    -webkit-perspective:800px;
    perspective:800px;
    -moz-perspective-origin:50% 50%;
    -ms-perspective-origin:50% 50%;
    -webkit-perspective-origin:50% 50%;
    height:400px;
    overflow:hidden;
}
#pagecontent{
    width:400px;
    height:400px;
    margin:0 auto;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    position:relative;
}
.page{
    width:360px;
    height:360px;
    padding:20px;
    font-weight:bold;
    font-size:300px;
    color:#F00;
    background-color:#000;
    text-align:center;
    position:absolute;
}
#page1{
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -webkit-transition:-webkit-transform 1s linear;
}
#page6{
    z-index:1;
}
#page5{
    z-index:2;
}
#page4{
    z-index:3;
}
#page3{
    z-index:4;
}
#page2{
    z-index:5;
}
#page1{
    z-index:6;
}
#ope{
    text-align:center;
    margin-top:100px;
}
</style>
<script>
var curNum=1;
var curIndex = 1;
function next(){
    if(curNum==6)
    {
        return;
    }
    var curPage=document.getElementById("page"+curNum);
    curPage.style.mozTransform="rotateY(-180deg)";
    curPage.style.webkitTransform="rotateY(-180deg)";
    curPage.style.zIndex = curIndex++;
    curNum++;
    }
function previous(){
    if(curNum==1)
    {
        return;
    }
    curNum--;
    var prePage=document.getElementById("page"+curNum);
    prePage.style.webkitTransform="rotateY(0deg)";
    prePage.style.mozTransform="rotateY(0deg)";
    prePage.style.zIndex = curIndex++;
    }
</script>
</head>
<body>
<div id="win">
   <div id="pagecontent">
      <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="ope">
      <input type="button" value="下一个" onclick="next()" />
      <input type="button" value="上一个" onclick="previous()" />
   </div>
</body>
</html>

    0
  • Bang丶
    2015-11-09 12:31:52

    我改成翻页效果后翻过的不能隐藏。。

    0