加林森 发表于 2022-4-28 21:51

【翻页作业】喫茶趣 - 巫娜

本帖最后由 加林森 于 2022-4-29 18:25 编辑 <br /><br /><style>
.book {
      left: -180px;
      display: flex;
      align-items: center;
      width: 1000px;
      height: 620px;
      perspective: 1000px;
      cursor: pointer;
      padding: 10px;
      position: relative;
      background: rgba(0,0,0,.0);
}
.page {
      background: #FFFFFF;
      padding: 0px;
      width: 410px;
      height: 600px;
      left: 50%;
      border-left: 1px solid #DCDCDC;
      transfrom-origin: left;
      box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
      transform-style: preserve-3d;
      position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
.page img { width: 100%; height: 100%; }
@keyframes rot1{
      from { transform: rotateY(0deg); }
      to { transform: rotateY(-180deg); }
}
@keyframes rot2{
      from { transform: rotateY(-180deg); }
      to { transform: rotateY(0deg); }
}
</style>

<div class="book">
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/626a93bf239250f7c5d6f1e3.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/626a9475239250f7c5d8ed3f.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/626a9638239250f7c5ddb262.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/626a96dd239250f7c5df9f3d.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/626a97d8239250f7c5e24113.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/626a9890239250f7c5e457bd.jpg" alt="" /></div>
      </div>
</div>

<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;

setzIdx();

document.querySelector(".book").onclick = function(){
      if(idx == 0){ //前翻
                page.style.animation = "rot1 .5s linear forwards";
                page.children.style.display = "none";
                page.children.style.display = "block";
                page.children.style.transform = "rotateY(-180deg)";
                currentPage ++;
                if(currentPage == all){
                        idx = 1;
                        currentPage = all - 1;
                }
      } else { //后翻
                page.style.animation = "rot2 .5s linear forwards";
                page.children.style.display = "none";
                page.children.style.display = "block";
                page.children.style.transform = "rotateY(0deg)";
                currentPage --;
                if(currentPage < 0){
                        idx = 0;
                        currentPage = 0;
                }
      }
      setzIdx();
}

function setzIdx(){
      for(j=currentPage; j<all; j++){
               page.style.zIndex = all - j;
      }
      for(j=0; j<currentPage;j++) {
                page.style.zIndex = j + 1;
      }
      if(currentPage == all - 1) page.style.zIndex = all;
}
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=502238022&auto=1&height=66"></iframe>

加林森 发表于 2022-4-28 21:52

@马黑黑

马黑黑 发表于 2022-4-28 22:16

有点问题额队长

东篱闲人 发表于 2022-4-28 22:20

加加和俺出了同样的问题。。。{:5_103:}

马黑黑 发表于 2022-4-28 22:24

东篱闲人 发表于 2022-4-28 22:20
加加和俺出了同样的问题。。。

嗯，都是图片 img 代码问题，估计是不用代码发图造成的。处理我已回复，这里再粘贴一份——
图片代码的问题：

<img id="aimg_DnGFG" class="zoom" file="https://s1.ax1x.com/2022/04/28/LXyXm6.jpg" lazyloadthumb="1" border="0" alt="" />

全部改为如下格式：

<img src="图片地址" alt="" />

其他的东东统统不要，那些是论坛的图片伸缩程序所用

加林森 发表于 2022-4-28 23:04

马黑黑 发表于 2022-4-28 22:24
嗯，都是图片 img 代码问题，估计是不用代码发图造成的。处理我已回复，这里再粘贴一份——
图片代码的 ...

谢谢老黑，我去修改。

马黑黑 发表于 2022-4-28 23:15

加林森 发表于 2022-4-28 23:04
谢谢老黑，我去修改。

{:4_190:}

加林森 发表于 2022-4-28 23:36

马黑黑 发表于 2022-4-28 23:15


谢茶！

红影 发表于 2022-4-29 09:27

这个没法翻页呢{:4_203:}

加林森 发表于 2022-4-29 12:43

马黑黑 发表于 2022-4-28 23:15


终于修改好了。你再看看。{:4_190:}

加林森 发表于 2022-4-29 12:44

红影 发表于 2022-4-29 09:27
这个没法翻页呢

修改好了，你再看看。{:4_204:}

马黑黑 发表于 2022-4-29 12:50

加林森 发表于 2022-4-29 12:43
终于修改好了。你再看看。

好的

马黑黑 发表于 2022-4-29 12:51

翻书行为很怪异

加林森 发表于 2022-4-29 12:53

马黑黑 发表于 2022-4-29 12:50
好的

谢谢老黑。{:4_190:}

加林森 发表于 2022-4-29 12:55

马黑黑 发表于 2022-4-29 12:51
翻书行为很怪异

就是，我头都大了。。。。{:5_102:}

马黑黑 发表于 2022-4-29 15:48

加林森 发表于 2022-4-29 12:55
就是，我头都大了。。。。

只有设置了 transform-origin 为默认值才会出现这种现象。我设置的 .page 元素的旋转中心为 left，即以 页面的左边边缘为转轴：

transfrom-origin: left;

加林森 发表于 2022-4-29 17:41

马黑黑 发表于 2022-4-29 15:48
只有设置了 transform-origin 为默认值才会出现这种现象。我设置的 .page 元素的旋转中心为 left，即以...

现在应该可以了吧。

红影 发表于 2022-4-29 22:58

加林森 发表于 2022-4-29 12:44
修改好了，你再看看。

还是有问题呢。

加林森 发表于 2022-4-29 23:06

红影 发表于 2022-4-29 22:58
还是有问题呢。

什么问题啊？{:4_203:}

红影 发表于 2022-4-30 21:54

加林森 发表于 2022-4-29 23:06
什么问题啊？

是原地翻的啊，应该是页面翻开的吧，
页: [1] 2
查看完整版本: 【翻页作业】喫茶趣 - 巫娜