js+css简单翻书效果

最新推荐文章于 2024-08-01 13:43:16 发布
最新推荐文章于 2024-08-01 13:43:16 发布
阅读量204 收藏 2
点赞数
分类专栏： 前端基础 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013483969/article/details/112537951
版权 
//上下翻页

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
          *{margin:0; padding:0}
          body,html{
               overflow: hidden;
          }
          #box{
               width:324px;
               height:576px;
               background-image: url("1.jpg");
               background-repeat: no-repeat;
               background-size: 100% auto;
               position:relative;
          }
          #box .page{
               width: 100%;
               height: 50%;
               bottom:0;
               left:0;
               position: absolute;
               transform-style: preserve-3d;
               transform-origin: center top;
               transition:1s all ease;
               z-index:2;
               transform:perspective(800px) rotateX(0deg);
          }
          #box .page div{
               width:100%;
               height:100%;
               position:absolute;
               left:0;
               top:0;
          }
          #box .page .front{
               /*显示图片的右半部分*/
               background-image: url("1.jpg");
               background-repeat: no-repeat;
               background-position: left bottom;
               background-size: 100% auto;
               /*不显示背面*/
               backface-visibility: hidden;
               /*层级比背面高*/
               z-index:2;
          }
          #box .page .back{
               background-image: url("2.jpg");
               background-repeat: no-repeat;
               background-position: left top;

               background-size: 100% auto;
               z-index: 1;
               transform: scale(1,-1);
          }
          #box .page2{
               width:100%;
               height:50%;
               position:absolute;
               bottom:0;
               left:0;

               background-image: url("2.jpg");
               background-repeat: no-repeat;
               background-position: left bottom;

               background-size: 100% auto;
               z-index:1;
          }
     </style>
</head>
<body>
     <div id="box">
         <div class="page">
             <div class="front"></div>
             <div class="back"></div>
         </div>
         <div class="page2"></div>
     </div>
</body>
</html>

<script type="text/javascript">
     document.addEventListener('DOMContentLoaded',function(){
         var oBox = document.getElementById('box');
         var oPage  = document.querySelector('.page');
         var oPage2  = document.querySelector('.page2');
         var oFront  = document.querySelector('.front');
         var oBack  = document.querySelector('.back');
         var iNow = 1;
         var bReady = true;
         oBox.onclick = function(){
             if(bReady==false) {
                 return;
             }
             bReady = false;
             iNow++;
             oPage.style.transition = '1s all ease';
             oPage.style.WebkitTransform = 'perspective(800px) rotateX(180deg)';
               };
         oPage.addEventListener('transitionend',function(){
             //1.瞬间拉回
             oPage.style.transition = 'none';
             oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
             oBox.style.backgroundImage = 'url("' + iNow + '.jpg")';
             oFront.style.backgroundImage = 'url("' + iNow + '.jpg")';

             var iNext = iNow+1;
             if(iNext > 3){
                  iNext = 1;
                  iNow = 0;
             }
            
                 oBack.style.backgroundImage = 'url("' + iNext + '.jpg")';
             oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")';

             bReady = true;
         },false);
     },false);
</script>



//左右翻页

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
          *{margin:0; padding:0}
          body,html{
               /*防止抖动*/
               overflow: hidden;
          }
          #box{
               width:324px;
               height:576px;
               background-image: url("1.jpg");
               background-repeat: no-repeat;
               background-size: auto 100%;
               position:relative;
          }
          #box .page{
               /*在box的右半部分*/
               width: 50%;
               height: 100%;
               top:0;
               right:0;
               position: absolute;
               /*开启3d模式*/
               transform-style: preserve-3d;
               /*设定旋转中心*/
               transform-origin: left center;
               transition:1s all ease;
               z-index:2;
               /*初始化*/
               transform:perspective(800px) rotateX(0deg);
          }
          #box .page div{
               width:100%;
               height:100%;
               position:absolute;
               left:0;
               top:0;
          }
          #box .page .front{
               /*显示图片的右半部分*/
               background-image: url("1.jpg");
               background-repeat: no-repeat;
               background-position: right top;
               background-size: auto 100%;
               /*不显示背面*/
               backface-visibility: hidden;
               /*层级比背面高*/
               z-index:2;
          }
          #box .page .back{
               background-image: url("2.jpg");
               background-repeat: no-repeat;
               background-position: left top;

               background-size: auto 100%;
               z-index: 1;
               transform: scale(-1,1);
          }
          #box .page2{
               width:50%;
               height:100%;
               position:absolute;
               right:0;
               top:0;

               background-image: url("2.jpg");
               background-repeat: no-repeat;
               background-position: right top;

               background-size: auto 100%;
               z-index:1;
          }
     </style>
</head>
<body>
     <div id="box">
         <div class="page">
             <div class="front"></div>
             <div class="back"></div>
         </div>
         <div class="page2"></div>
     </div>
</body>
</html>

<script type="text/javascript">
     document.addEventListener('DOMContentLoaded',function(){
         var oBox = document.getElementById('box');
         var oPage  = document.querySelector('.page');
         var oPage2  = document.querySelector('.page2');
         var oFront  = document.querySelector('.front');
         var oBack  = document.querySelector('.back');
         var iNow = 1;
         var bReady = true;
         oBox.onclick = function(){
             if(bReady==false) {
                 return;
             }
             bReady = false;
             iNow++;
             oPage.style.transition = '1s all ease';
             oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
               };
         oPage.addEventListener('transitionend',function(){
             //1.瞬间拉回
             oPage.style.transition = 'none';
             oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
             //2.换图
             // oBox.style.background = 'url("'+(iNow%3)+'.jpg") no-repeat';
             // oFront.style.background = 'url("'+(iNow%3)+'.jpg") right top no-repeat';
                 // oBack.style.background = 'url("'+((iNow+1)%3)+'.jpg") left top no-repeat';
             // oPage2.style.background = 'url("'+((iNow+1)%3)+'.jpg") right top no-repeat';
             oBox.style.backgroundImage = 'url("' + iNow + '.jpg")';
             oFront.style.backgroundImage = 'url("' + iNow + '.jpg")';

             var iNext = iNow+1;
             if(iNext > 3){
                  iNext = 1;
                  iNow = 0;
             }
            
                 oBack.style.backgroundImage = 'url("' + iNext + '.jpg")';
             oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")';

             bReady = true;
         },false);
     },false);
</script>

 

hylw
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3翻书效果
aperson111的专栏
07-23 2106
实现一个比较简单的翻书效果，仅仅是个小
CSS 翻书特效
0day
02-22 272
css翻书，书本特效
JavaScript&Css3实现翻书特效
zhou
07-28 607
js,css3实现翻书特效 HTML <div class="book"> <div id="page1"> <div class="page-back"></div> <div class="page-front">HTML5</div> </div> <div id="p...
制作一个简单的翻书效果
liuhao9999的博客
02-22 335
要制作一个简单的翻书效果，我们可以使用HTML、CSS和JavaScript。下面是一个基本的示例，它展示了如何模拟翻页效果。
html5+css3+js超逼真翻书效果
12-13
这是一款大师级的html5翻书效果（翻页效果），这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时，书本打开动画。注意：必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。
使用CSS实现书籍的翻页效果(使用了animation)
Angel_Tears_的博客
04-11 1890
要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。
HTML+JAVASCRIPT+CSS模拟实现模拟书本
最新发布
m0_46981340的博客
08-01 413
HTML+JAVASCRIPT+CSS模拟实现模拟书本
多功能电子相册翻书页效果特效HTML+css+js代码
03-09
标题 "多功能电子相册翻书页效果特效HTML+css+js代码" 描述了一种用于网页设计的技术，这种技术能够实现模拟真实书籍翻页效果的动态电子相册。电子相册翻页特效使得用户在浏览网页上的照片集时，能够体验到如同翻阅...
纯CSS3实现逼真的翻书效果
06-24
压缩包中的`说明.html`文件可能包含了实现这一效果的HTML代码示例，而`jiaoben4666`可能是一个JavaScript脚本，虽然题目要求是纯CSS3实现，但有时为了增加交互性和优化性能，开发者可能会结合JavaScript来辅助控制翻...
CSS3实现3D翻书效果
01-21
类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，...
基于 HTML5 & CSS3 实现翻书效果
10-23
Turn.js：基于 HTML5 & CSS3 实现翻书效果,很好的翻书效果插件
一个简单好看的纯CSS3翻书效果.zip
07-11
【标签】"js特效-一个简单好看的纯CSS3翻书效果"表明这个项目可能不仅限于CSS3，还可能结合JavaScript进行增强。JavaScript是一种广泛使用的客户端脚本语言，常用于网页交互和动态效果的实现。在这个案例中，...
js+css实现翻页时钟效果
m0_56938501的博客
01-05 1572
js+css实现翻页时钟效果
html网页制作——HTML+CSS+JavaScript（web前端网页制作课作业）
qq3200628753的博客
12-18 159
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
css3+html翻书本动画网页js特效
ICode联盟
10-15 115
下载地址 css3+html实现的翻书本动画网页特效，可以当做loading使用。 dd:
css+js+html 实现翻书效果
m0_56938501的博客
01-20 1299
css+js+html 实现翻书效果
使用css3实现翻书效果（一）
qq_32619577的博客
03-26 2760
最近在网页上看到一个使用css3制作的很有趣的样式，通过纯css3的使用实现翻书的效果，作为初学者的我决定实现一下该效果~该网站特效如图所示： 是不是感觉特效非常棒，直接使用css样式而不使用图片大大减少了加载速度，也降低了用户流量的损耗，实在是一举两得，下面我介绍一下我的开发步骤： 经过我对网站代码的研究，该书籍div分为以下几部分 1.最上层是写
纯CSS3翻书动画js特效
ICode联盟
01-29 149
纯CSS3翻书动画特效,没有使用任何js代码，css翻页效果。
微信小程序实现翻书效果
weixin_39815923的博客
04-10 4290
最近要在微信小程序里实现一个类似翻页的场景，网上翻看了多个案例无非就两种实现，第一种通过css 3d变换+动画实现，第二使用现成库。前者实现效果一般，后者js库是基于古老的JQuery来实现的并没办法移植到小程序了里。下面就自己调研了一下turnjs来实现小程序的turnjs效果截图。
html5+css3 3d transforms 制作超逼真翻书效果演示代码
06-09
以下是一个使用HTML5和CSS3制作的超逼真翻书效果的演示代码： HTML部分： ``` 封面"> 背面"> 第一页"> 第二页"> 第三页"> 第四页"> ``` CSS部分： ``` .book { width:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值