一最安 2021-09-16 10:43 采纳率: 84.4%
浏览 24
已结题

请问为何用css和js实现的3d翻页效果只能运行一次？

使用以下代码，发现我的书本翻页，运行后完成一次从第一页到后面的操作后，再想重新翻页就运行不了了，望赐教，请问该如何调整呢？

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 2000px;
                -moz-perspective: 2000px;
                -ms-perspective: 2000px;
                perspective: 2000px;
                background-color: #212121;
            }
            .book {
                position: absolute;
                top: 30%;
                left: 40%;
                width: 500px;
                height: 500px;
                background-color: #fff;
                -webkit-transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);
                -o-transform: rotateX(30deg);
                transform: rotateX(30deg);
            }
            /*开3D效果*/
            .pre-3d {               
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 500px;
                height: 500px;
                border: 1px solid #1976D2;
                text-align: center;
                -webkit-transform-origin: 0 50%;
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }
            .front1 {
                background-color: paleturquoise;
            }
            .front2 {
                background-color: goldenrod;
            }   
            img{
                width: 100%;
                height: 100%;
            }       
        </style>
    </head>
    <body>
        <div class="book pre-3d" id="book">
            <!-- 后封面 -->
            <ul>
            <li class="" id="Rcover">后封面<img src="img/22.jpg" alt=""></li>
            <!-- 书页 -->
            <li class="pre-3d  page front2">第二页<img src="img/33.jpg" alt=""></li>
            <li class="pre-3d  page front2">第一页<img src="img/33.jpg" alt=""></li>
            <!-- <li class="pre-3d  page front2">ddfdf<img src="img/4.jpg" alt=""></li>
            
            <li class="pre-3d  page front2">sddd<img src="img/2.jpg" alt=""></li> -->
            <!-- 书的封面 -->
            <!-- <li class="pre-3d  page front1">封面<img src="img/44.jpg" alt=""></li> 有问题 -->
            </ul>
        </div>
   </body>
<script>
    var b=document.getElementById('book');
    var s=document.getElementsByTagName('li');
    var c=document.getElementById('Rcover');
    var i=2;
    b.onclick=function(){
        if(i>0){
            s[i].style.transform='rotateY(-150deg)';
            s[i].style.transition='3s';
            i--;
        }
    }
    c.onclick=function(){
        // j比i大1
        for(var j=1;j<6;j++){
        s[j].style.transform='rotateY(0deg)';
            s[j].style.transition='3s';
        }
        i=2;
        console.log("i:",i)
    }
</script>
</html>
  • 写回答

1条回答 默认 最新

  • 峰子哥哥 2021-09-16 11:07
    关注

    最下面的后封面点击事件改成这样的：

          c.onclick = function (e) {
        //阻止事件穿透
        e.stopPropagation();
        // j比i大1
        //这里循环不写死6，并且从0开始循环，不是1
        //之前就是这里报错了，下标越界
        for (var j = 0; j < s.length; j++) {
            s[j].style.transform = 'rotateY(0deg)';
            s[j].style.transition = '3s';
        }
        i = 2;
        console.log("i:", i)
    }

    如果能帮到你，请点击下【采纳】，非常感谢，

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月24日
  • 已采纳回答 9月16日
  • 创建了问题 9月16日

悬赏问题

  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件，但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系