用js实现翻书的动画效果

效果图（哈哈哈哈，博主的恶趣味请无视）

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");//所有的小divvar obox=document.getElementById("y");//获取最外面的divvar a=1;//假设1为开始var i=div.length;var z=2;//定义层级//点击页面翻页document.onclick=function(){if(a==1){//计时器   var x=setInterval(function(){i-=1;//遍历每一个divz+=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实现翻书的动画效果相关推荐

js小孩翻书动态实现效果
效果如图: 通过点击strat和stop两个按钮,实现动画的开始停止代码如下三张图片实现动画翻书效果 <!doctype html> <html lang="en&qu ...
android 翻页动态效果,Android 实现翻书的动画效果
当你们看到这标题时,多少觉得好牛逼哦,其实我想说的是,这只是一个思路,只是简单的三维空间旋转.为什么要写这个博客呢,最近在面试时,面试官突然问这样的效果怎么实现的,当时我说用动画,他说具体点,我说用R ...
html局部翻页效果,基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是 ...
原生JS实现翻书特效
给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html><head><meta c ...
php加入js动态效果,js怎么给输入框增加动画效果
这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. (function() { function p() { window.requ ...
js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
Unity Shader 之简单实现折叠平面（翻书）的效果
Unity Shader 之简单实现折叠平面(翻书)的效果目录 Unity Shader 之简单实现折叠平面(翻书)的效果一.简单介绍二.实现原理三.注意事项四.效果预览五.实现步骤 ...
html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...

用js实现翻书的动画效果

用js实现翻书的动画效果相关推荐

最新文章

热门文章