用js实现翻书的动画效果

最新推荐文章于 2024-07-23 11:50:44 发布
置顶 最新推荐文章于 2024-07-23 11:50:44 发布
阅读量2.3k 收藏 4
点赞数 4
分类专栏： js 文章标签： 翻页效果 js 定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951248/article/details/100593737
版权

效果图（哈哈哈哈，博主的恶趣味请无视）
在这里插入图片描述
css部分

 <style>
			.y{
				background-color: cornflowerblue;
				height: 200px;
				width: 300px;
				display: flex;
				position: relative;
				left: 230px;
				top: 50px;
				
			}
			
			.y1{
				background-color: cornflowerblue;
				height: 200px;
				width: 150px;
				position: absolute;
				transform-origin: left;
				right: 0;
				border: 1px solid black;
                font-size: 30px;
			}
			
			
			.y2{
				height: 200px;
				width: 150px;
				position: absolute;
				transform-origin: left;
				transform:rotatey(180deg) ;
				transition: 1s ;
				border: 1px solid black;
               
			}
			img{
				transform-origin: left;
				height: 200px;
				width: 150px;
				position: absolute;

			}
			p{
				position: absolute;
				top: 20px;
				right: 0;
				font-size: 40px;
			}
			
		</style>

html部分 我插入了100张图片

<div class="y" id="y">
			<p> 爱你哦</p>
			<div class="y1"><img src="cxk/100.png"></div>
			<div class="y1"><img src="cxk/99.png"></div>
			<div class="y1"><img src="cxk/98.png"></div>
			<div class="y1"><img src="cxk/97.png"></div>
			<div class="y1"><img src="cxk/96.png"></div>
			<div class="y1"><img src="cxk/95.png"></div>
			<div class="y1"><img src="cxk/94.png"></div>
			<div class="y1"><img src="cxk/93.png"></div>
			<div class="y1"><img src="cxk/92.png"></div>
			<div class="y1"><img src="cxk/91.png"></div>
			<div class="y1"><img src="cxk/90.png"></div>
			<div class="y1"><img src="cxk/89.png"></div>
			<div class="y1"><img src="cxk/88.png"></div>
			<div class="y1"><img src="cxk/87.png"></div>
			<div class="y1"><img src="cxk/86.png"></div>
			<div class="y1"><img src="cxk/85.png"></div>
			<div class="y1"><img src="cxk/84.png"></div>
			<div class="y1"><img src="cxk/83.png"></div>
			<div class="y1"><img src="cxk/82.png"></div>
			<div class="y1"><img src="cxk/81.png"></div>
			<div class="y1"><img src="cxk/80.png"></div>
			<div class="y1"><img src="cxk/79.png"></div>
			<div class="y1"><img src="cxk/78.png"></div>
			<div class="y1"><img src="cxk/77.png"></div>
			<div class="y1"><img src="cxk/76.png"></div>
			<div class="y1"><img src="cxk/75.png"></div>
			<div class="y1"><img src="cxk/74.png"></div>
			<div class="y1"><img src="cxk/73.png"></div>
			<div class="y1"><img src="cxk/72.png"></div>
			<div class="y1"><img src="cxk/71.png"></div>
			<div class="y1"><img src="cxk/70.png"></div>
			<div class="y1"><img src="cxk/69.png"></div>
			<div class="y1"><img src="cxk/68.png"></div>
			<div class="y1"><img src="cxk/67.png"></div>
			<div class="y1"><img src="cxk/66.png"></div>
			<div class="y1"><img src="cxk/65.png"></div>
			<div class="y1"><img src="cxk/64.png"></div>
			<div class="y1"><img src="cxk/63.png"></div>
			<div class="y1"><img src="cxk/62.png"></div>
			<div class="y1"><img src="cxk/61.png"></div>
			<div class="y1"><img src="cxk/60.png"></div>
			<div class="y1"><img src="cxk/59.png"></div>
			<div class="y1"><img src="cxk/58.png"></div>
			<div class="y1"><img src="cxk/57.png"></div>
			<div class="y1"><img src="cxk/56.png"></div>
			<div class="y1"><img src="cxk/55.png"></div>
			<div class="y1"><img src="cxk/54.png"></div>
			<div class="y1"><img src="cxk/53.png"></div>
			<div class="y1"><img src="cxk/52.png"></div>
			<div class="y1"><img src="cxk/51.png"></div>
			<div class="y1"><img src="cxk/50.png"></div>
			<div class="y1"><img src="cxk/49.png"></div>
			<div class="y1"><img src="cxk/48.png"></div>
			<div class="y1"><img src="cxk/47.png"></div>
			<div class="y1"><img src="cxk/46.png"></div>
			<div class="y1"><img src="cxk/45.png"></div>
			<div class="y1"><img src="cxk/44.png"></div>
			<div class="y1"><img src="cxk/43.png"></div>
			<div class="y1"><img src="cxk/42.png"></div>
			<div class="y1"><img src="cxk/41.png"></div>
			<div class="y1"><img src="cxk/40.png"></div>
			<div class="y1"><img src="cxk/39.png"></div>
			<div class="y1"><img src="cxk/38.png"></div>
			<div class="y1"><img src="cxk/37.png"></div>
			<div class="y1"><img src="cxk/36.png"></div>
			<div class="y1"><img src="cxk/35.png"></div>
			<div class="y1"><img src="cxk/34.png"></div>
			<div class="y1"><img src="cxk/33.png"></div>
			<div class="y1"><img src="cxk/32.png"></div>
			<div class="y1"><img src="cxk/31.png"></div>
			<div class="y1"><img src="cxk/30.png"></div>
			<div class="y1"><img src="cxk/29.png"></div>
			<div class="y1"><img src="cxk/28.png"></div>
			<div class="y1"><img src="cxk/27.png"></div>
			<div class="y1"><img src="cxk/26.png"></div>
			<div class="y1"><img src="cxk/25.png"></div>
			<div class="y1"><img src="cxk/24.png"></div>
			<div class="y1"><img src="cxk/23.png"></div>
			<div class="y1"><img src="cxk/22.png"></div>
			<div class="y1"><img src="cxk/21.png"></div>
			<div class="y1"><img src="cxk/20.png"></div>
			<div class="y1"><img src="cxk/19.png"></div>
			<div class="y1"><img src="cxk/18.png"></div>
			<div class="y1"><img src="cxk/17.png"></div>
			<div class="y1"><img src="cxk/16.png"></div>
			<div class="y1"><img src="cxk/15.png"></div>
			<div class="y1"><img src="cxk/14.png"></div>
			<div class="y1"><img src="cxk/13.png"></div>
			<div class="y1"><img src="cxk/12.png"></div>
			<div class="y1"><img src="cxk/11.png"></div>
			<div class="y1"><img src="cxk/10.png"></div>
			<div class="y1"><img src="cxk/9.png"></div>
			<div class="y1"><img src="cxk/8.png"></div>
			<div class="y1"><img src="cxk/7.png"></div>
			<div class="y1"><img src="cxk/6.png"></div>
			<div class="y1"><img src="cxk/5.png"></div>
			<div class="y1"><img src="cxk/4.png"></div>
			<div class="y1"><img src="cxk/3.png"></div>
			<div class="y1"><img src="cxk/2.png"></div>
			<div class="y1"><img src="cxk/1.png"></div>
            <div class="y1"> 鸡你太美</div>
		</div>

js部分

<script>
	  var div=document.querySelectorAll(".y div");//所有的小div
	  var obox=document.getElementById("y");//获取最外面的div
	  var a=1;//假设1为开始
	  var i=div.length;
	  var z=2;//定义层级
	  
	    //点击页面翻页
       document.onclick=function(){

        	  if(a==1){
        	    
        	 //计时器   
        	var x=setInterval(function(){
        		i-=1;//遍历每一个div
        		z+=1;
        		
        		div[i].style.right="2px"; //给距离让它们连续，不会发生奇怪的事
        		
        		div[i].className="y2";//给每个div新的样式
        		div[i].style.zIndex=z;//不设层级会叠在一起

        	if(i<=0){
        		clearInterval(x);
        	}
        	},100)
        	a=0;
        	
        	//点击div暂停
        	obox.onclick=function(eve){
        		var e=eve||window.event;//获取当前事件对象
        		e.cancelBubble=true;//取消冒泡
        		clearInterval(x);
        		a=1;//a为1是为了下次可以继续点页面开始
        	}

        	}else{
        		a=1;//为了不点两下
        	}
	   }	  
</script>
鱼唇的哦豆豆啊
关注
专栏目录
翻书效果js
07-03
翻书效果js
JS翻书效果
10-31
自动翻书效果、带有背景音乐、替换方便、只需要替换图片即可
炫酷的前端页面翻书动画效果
最新发布
admire_fish的博客
07-23 1003
炫酷的前端页面翻书动画效果
使用JavaScript实现滑动动画的几种方法
微赚开发者技术分享博客
06-30 891
滑动动画通常是指元素在页面上平滑移动或改变尺寸的过程，通过改变元素的位置、大小或样式属性，使其产生视觉上的动态效果。通过本文的介绍，我们详细探讨了使用JavaScript实现滑动动画的几种方法：使用CSS过渡属性、JavaScript定时器和第三方动画库（Tween.js）。Tween.js是一个轻量级的JavaScript动画库，提供了丰富的动画效果和配置选项。JavaScript定时器是另一种实现滑动动画效果的方法，通过逐帧改变元素的位置或样式属性，从而实现平滑的动画效果。// 定义滑动动画函数。
js常用插件(九)之移动端翻书效果turn.js
小龚的博客
02-01 2260
js常用插件之turn.js—modernizr翻书效果 欢迎点击: 个人官网博客 首先引入必要的三个文件 <link rel="stylesheet" href="./css/basic.css"> <script src="./js/modernizr.2.5.3.min.js"></script> <script src="./js/turn.js"></script> turn.js modernizr.2.5
【翻书特效 源代码---JS实现，附效果】
2401_84094725的博客
04-08 753
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。你可能发现了我没有提到。
js小孩翻书动态实现效果
weixin_45745641的博客
08-26 854
效果如图： 通过点击strat和stop两个按钮，实现动画的开始停止 代码如下 三张图片实现动画翻书效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <img src="girl_1.gif" alt="" id="img" /&gt
js实现翻书效果
weixin_30596343的博客
07-16 1287
一、实现效果一<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3翻书效果</title> <style type="text/css"> ...
js 翻书翻页效果
weixin_35749545的博客
02-02 764
为了实现 JS 翻书翻页效果，可以使用 CSS3 动画和 JS 交互。首先定义好 HTML 结构，然后使用 CSS3 的 transition 和 transform 属性实现动画效果，最后通过 JS 监听用户的操作并对页面做出相应的改变。代码实现细节可以参考一些现有的开源项目或教程。 ...
微信小程序，H5翻书动画效果
11-10
本文将深入探讨如何在微信小程序和H5中实现翻书动画效果，并介绍相关的关键技术和实践方法。 首先，我们需要理解微信小程序的基础架构。微信小程序是腾讯推出的一种轻量级应用开发平台，它允许开发者使用JavaScript...
基于JS实现翻书效果的页面切换样式
12-02
本篇将详细解释如何使用JS来实现一个翻书效果的页面切换样式。 首先，我们看到HTML结构中包含了一个`<div>`元素，id为"book"，它代表了整个书籍的容器。这个容器有两个子`<div>`，分别用id"left"和"right"表示书籍...
js实现web的翻页功能
04-26
纯js实现web前端的翻页，实现、首页、尾页、上一页、下一页的功能实现
js实现相册翻书效果
11-02
JS实现图片翻书效果,纯手工编写，很炫的效果
JS实现图片翻书效果
12-19
JS实现图片翻书效果
js翻书效果及书架式切换特效
10-11
js翻书效果及书架式切换特效，IE及FIREFOX 都能执行，两个很不错的JS图片切换特效
JS实现图片翻书效果.pdf
09-27
在探讨如何使用JavaScript实现图片翻书效果时，首先需要了解几个核心概念。这包括页面布局设计、图片处理、定时器控制以及浏览器兼容性问题。 页面布局设计主要涉及到CSS样式的使用，通过定义HTML元素的类和ID来...
移动端H5开发 Turn.js实现很棒的翻书效果
10-22
总而言之，Turn.js是一款优秀的JavaScript库，特别适合用于移动端H5开发中实现翻书效果。它不仅支持在浏览器上运行，还能在iOS和Android等移动设备上提供良好的交互体验。通过本文的介绍，相信开发者们可以更好地...
又一个CSS3翻书动画效果.rar
07-10
《CSS3实现翻书动画效果详解》 在网页设计领域，动态效果的运用极大地提升了用户体验，其中CSS3的翻书动画效果就是一种极具吸引力的技术。本文将深入探讨如何利用CSS3来实现逼真的翻书动画，同时也会分析并讨论这款...
原生js与css3实现简单翻页动画
weixin_54000091的博客
03-07 843
css实现简单翻页动画
CSS3实现翻书效果过渡动画详解
"这篇文章主要介绍了如何使用CSS3来创建一个类似翻书效果的过渡动画，通过简化DOM结构和巧妙地运用CSS3的动画属性来实现。作者在Vue项目中遇到一个加载推荐书籍的过渡动画需求，最初使用JavaScript实现，但后来尝试...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值