精华内容
下载资源
问答
  • vue 使用turn.js 翻书效果
    2021-11-26 14:53:45

    官方demo:::: https://github.com/blasten/turn.js/blob/master/demos/magazine_single/index.html
    1.去以上地址把对应的jq 和turn.js 下到本地项目 的public 文件夹下 ,在该文件夹下引入,
    2.组件内引入直接使用。
    3.npm 未进行安装jq 和turn
    如图
    在这里插入图片描述

    更多相关内容
  • JS翻书效果

    2017-10-31 10:31:50
    自动翻书效果、带有背景音乐、替换方便、只需要替换图片即可
  • 本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示; <!DOCTYPE ...
  • 下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /...
  • JS实现图片翻书效果.pdf
  • 主要为大家详细介绍了Turn.js实现很棒的翻书效果,对Turn.js翻书效果的实现进行总结,感兴趣的小伙伴们可以参考一下
  • 这是一款大师级的html5翻书效果(翻页效果),这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时,书本打开动画。注意:必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。
  • 本文主要介绍JavaScript中利用transform实现数字翻页效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
  • 如何使用CSS制作翻书效果? css思路: 首先准备一个div作为书本,然后准备一个div作为第一页,其中还要有两个div作为正反面,分别对其各部分属性进行设置。其中还要为book与page开启3D,还用到了一个backface-...

    如何使用制作翻书效果?

    思路:

      首先准备一个div作为书本,然后准备一个div作为第一页,其中还要有两个div作为正反面,分别对其各部分属性进行设置。其中还要为book与page开启3D,还用到了一个backface-visible(其实这个属性我之前没见到过,这是第一次用 )属性,该属性用来设置当div翻转一定角度后是否可见,制作好第一页后,其余的几页与第一页类似。
    注意:
      要对每页的z-index属性设置,否则将从后向前显示(四 三 二 一),z-index属性用于设置它的层叠等级,数字越大层次越高。
      最好将正面的div放在反面的下面,这样显示时不需要再设置z-index属性了。
      其中设置div的box-sizing属性为border-box;这样为div设置padding和margin时不会影响元素的宽,高

    js部分:

      使用querySelector分别获得book与page元素,声明一个变量page(初值为1,第一页下标是0),来表示第几页,当执行book的单击事件时,就会调用执行function()函数;函数第一次执行时,将第一页翻转-135deg,时间是2s。然后page自加,判断是否满足if条件:
      若满足if语句的条件,则说明书本已经翻到最后一页,并将书本合上,从后往前执行循环,依次将每页的翻转角度变为0即可;
      若不满足,则判断是否满足循环执行的条件,进行第二次循环,重复上面过程。。。
    效果如下:在这里插入图片描述
    具体看代码:

    <style>
    	body{
    	 	background:#666666;
    		margin: 0;
    		padding: 0;
    	}
    	.book{
    		position: relative;
    		margin: 200px auto;/*让book在页面居中*/
    		width:200px;
    		height: 300px;
    		background-color: #B22222;
    		transform-style: preserve-3d;/*开启3D*/
    	}
    	#page1,#page2,#page3,#page4{
    		transform-style: preserve-3d;/*开启3D*/
    		transition: 2s;/*时间是两秒*/
    		transform-origin: left;/*并将其旋转元素的基点位置设置成左边*/
    		position: absolute;/*将其分别定位在book中*/
    		left:0;
    		top:0;
    		width:200px;
    		height:300px;
    	}
    	/*设置每页的层叠等级*/
    	#page1{
    		z-index: 4;
    	}
    	#page2{
    		z-index: 3;
    	}
    	#page3{
    		z-index: 2;
    	}
    	#page4{
    		z-index:1;
    	}
    	.before{
    		width:200px;
    		height:300px;
    		position: absolute;
    		left:0;
    		top:0;
    		background-color: #32CD32;
    		text-align:center;
    		box-sizing: border-box;
    		border:10px solid white;
    		font:bold 36px/300px arial;
    		backface-visibility: hidden;
    	}
    	.after{
    		position:absolute;
    		width:200px;
    		height: 300px;
    		box-sizing: border-box;
    		left:0;
    		top:0;
    		background-color:#DCDCDC;
    		border:10px solid white;
    	}
    </style>
    <body>
    	<div class="book">
    		<div id="page1">
    			<div class="after"></div>
    			<div class="before">HTML5</div>
    		</div>
    		<div id="page2">
    			<div class="after"></div>
    			<div class="before">CSS3</div>
    		</div>
    		<div id="page3">
    			<div class="after"></div>
    			<div class="before">Javascript</div>
    		</div>
    		<div id="page4">
    			<div class="after"></div>
    			<div class="before">END</div>
    		</div>
    	</div>
    	<script>
    		var page=0;
    		var pagedemo = document.querySelectorAll("[id^='page']");
    		var bookdemo = document.querySelector(".book");
    		bookdemo.οnclick=function(){
    			pagedemo[page].style.transition="2s";
    			pagedemo[page].style.transform="rotateY(-135deg)";
    			page++;
    			if(page==4){
    				var i;
    				for(i=page-1;i>=0;i--){
    					pagedemo[i].style.transform="rotateY(0deg)";
    				}
    			}
    		}
    	</script> 	
    </body>	
    

    如果大家有什么意见或建议希望大家在评论区多多交流,谢谢😊
    在这里插入图片描述

    展开全文
  • react双面翻书效果.zip

    2020-12-10 10:40:00
    react加css3实现双面翻书效果
  • 其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人...
  • js翻页
  • 主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Js 翻书效果

    2014-11-26 13:08:17
    js 翻书效果 兼容ie8 等主流浏览器
  • 翻书效果js

    2012-07-03 21:29:38
    翻书效果js
  • 主要为大家详细介绍了turn.js异步加载实现翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一个JS翻页效果

    2020-12-03 02:22:27
    <IFRAME border=0 align=center marginWidth=0 marginHeight=0 src=”1.htm” frameBorder=no width=200 scrolling=no ...</IFRAME> 上一页</a><a>下一页</a> [removed] var curId = 1; var max
  • 主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
  • 可先到 https://czhenya.blog.csdn.net/article/details/112443718 文章看效果,是否是自己需要的,再决定是否下载。支持当前所有Unity版本,有任何问题都可私信哦。
  • 效果 效果比较简单,是在浏览器运行实现的。 源代码 至于具体的图片,大家可以根据需求自行添加即可~ 下面是源代码。 <... <head>...JS实现图片翻书效果</title> <META http-equiv

    效果

    效果比较简单,是在浏览器运行实现的。
    在这里插入图片描述

    源代码

    至于具体的图片,大家可以根据需求自行添加即可~
    下面是源代码。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS实现图片翻书效果</title>
    <META http-equiv=imagetoolbar content=no>
    <STYLE type=text/css>
    #center {
    	LEFT: 50%; POSITION: absolute; TOP: 50%
    }
    #DHTMLBOOK {
    	BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
    }
    #TXTBOX {
    	FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
    }
    .page {
    	OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
    }
    .right {
    	BORDER-RIGHT: #000000 1px solid; LEFT: 50%
    }
    .turn {
    	BACKGROUND: #000000
    }
    .img {
    	WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
    }
    </STYLE>
    
    <SCRIPT type=text/javascript><!--
    
    document.onselectstart = function () { return false; }
    
    var nI  = 0;
    var kI  = 0;
    var run = false;
    
    function setOpacity(obj,o) {
    	if (o<0) o=0; else if (o>100) o = 100;
    	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
    }
    function TPR__(p) {
    	P1.style.left  = 50-(2.5*p)+"%";
    	P1.style.width = (2.5*p)+"%";
    	setOpacity(P1i, .5*p*p);
    	if (p == 20) run = false;
    }
    function TPR_(p) {
    	P2.style.width = 50-(2.5*p)+"%";
    	setOpacity(P2i, 100-.5*(p*p));
    	if (p == 20) {
    		P2i.src = IMGSRC[kI].src;
    		setOpacity(P2i, 100);
    		P2.style.width = "50%";
    		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
    	}
    }
    function TPR() {
    	if (!run) {
    		run = true;
    		P01i.src = IMGSRC[kI].src;
    		P1.style.width = 0;
    		kI++;
    		if (kI>=nI) kI = 0;
    		titLe(kI);
    		P02i.src = IMGSRC[kI].src;
    		P1i.src  = IMGSRC[kI].src;
    		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
    	} else setTimeout("TPR()", 100);
    }
    
    function TPL__(p) {
    	P2.style.width = (2.5*p)+"%";
    	setOpacity(P2i, .5*p*p);
    	if (p == 20) run = false;
    }
    function TPL_(p) {
    	P1.style.left  = (2.5*p)+"%";
    	P1.style.width = 40+(10-2.5*p)+"%";
    	setOpacity(P1i, 100-.5*(p*p));
    	if (p == 20) {
    		P1i.src = IMGSRC[kI].src;
    		setOpacity(P1i, 100);
    		P1.style.left  = 0;
    		P1.style.width = "50%";
    		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
    	}
    }
    function TPL() {
    	if (!run) {
    		run = true;
    		P02i.src = IMGSRC[kI].src;
    		P2.style.width = 0;
    		kI--;
    		if (kI < 0) kI = nI-1;
    		titLe(kI);
    		P01i.src = IMGSRC[kI].src;
    		P2i.src  = IMGSRC[kI].src;
    		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
    	} else setTimeout("TPL()", 100);
    }
    function titLe(p) {
    	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
    }
    onload = function() {
    	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
    	DB      = document.getElementById("DHTMLBOOK");
    	P01     = DB.getElementsByTagName("span")[0];
    	P01i    = P01.getElementsByTagName("img")[0];
    	P02     = DB.getElementsByTagName("span")[1];
    	P02i    = P02.getElementsByTagName("img")[0];
    	P1      = DB.getElementsByTagName("span")[2];
    	P1i     = P1.getElementsByTagName("img")[0];
    	P2      = DB.getElementsByTagName("span")[3];
    	P2i     = P2.getElementsByTagName("img")[0];
    	nI      = IMGSRC.length;
    	P1i.src = IMGSRC[kI].src;
    	P2i.src = IMGSRC[kI].src;
    	titLe(kI);
    	DB.style.visibility = "visible";
    }
    //-->
    </SCRIPT>
    
    <META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
    <BODY>
    
    <DIV id=center>
    <DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
    <SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
    <SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
    <SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN> 
    <DIV id=TXTBOX></DIV></DIV></DIV>
    <DIV id=imgsrc style="VISIBILITY: hidden">
    <IMG  src="1.png">
    <IMG  src="2.png">
    <IMG  src="3.png">
    <IMG  src="4.png">
    <IMG  src="5.png">
    <IMG  src="6.png">
    <IMG  src="7.png">
    </DIV>
    </BODY></HTML>
    
    展开全文
  • 网页电子相册翻书页特效,html代码,自适应电脑手机版
  • JS实现翻书效果图片浏览 JS实现翻书效果图片浏览 JS实现翻书效果图片浏览
  • 图片翻书效果想必大家都有见过吧,在本文将为大家介绍下使用js是如何实现的,具体的代码如下,感兴趣的朋友可以参考下
  • js实现翻页3D相册

    2018-11-22 15:29:49
    原生js结合CSS3 transform-style 属性实现3D翻书效果
  • js 翻页效果

    2012-12-28 16:42:42
    js 翻页效果

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,102
精华内容 7,640
关键字:

js翻书效果