为了账号安全,请及时绑定邮箱和手机立即绑定

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>


正在回答

3 回答

神啊,少个t都能看出来。

我以为想的跟我一样啊,能不能做成1到6之后,按next回到1,反复循环怎么实现??

0 回复 有任何疑惑可以回复我~
#1

Yinsion_Nie

可以实现,将if中的return改为和下面一样的代码,然后将curIndex赋值为1或者6.只是这样会影响动画效果。
2016-11-12 回复 有任何疑惑可以回复我~

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


0 回复 有任何疑惑可以回复我~

代码是正确的   是不是浏览器的问题

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

1-----6翻对的,6---1翻页,没翻一页总会回到最后一页?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信