精华内容
下载资源
问答
我要提问
  • 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实现翻书效果的页面切换样式

     2020-12-02 21:09:23
    本文给大家分享一段代码，基于js代码实现的翻书效果的页面切换样式，具体代码如下所示； <!DOCTYPE ...
    收起

  • 原生JS实现图片翻书效果

     2020-12-09 12:11:39
    下面给大家分享基于原生js实现的图片翻书效果，具体代码如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /...
    收起

  • JS实现图片翻书效果.pdf

     2021-09-27 12:59:58
    JS实现图片翻书效果.pdf
    收起

  • 移动端H5开发 Turn.js实现很棒的翻书效果

     2020-10-22 02:30:05
    主要为大家详细介绍了Turn.js实现很棒的翻书效果，对Turn.js翻书效果的实现进行总结，感兴趣的小伙伴们可以参考一下
    收起

  • html5+css3+js超逼真翻书效果

     2019-12-13 09:56:26
    这是一款大师级的html5翻书效果（翻页效果），这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时，书本打开动画。注意：必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。
    收起

  • JavaScript中transform实现数字翻页效果

     2020-10-20 06:05:16
    本文主要介绍JavaScript中利用transform实现数字翻页效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    收起

  • 半小时，一篇文0基础让你轻松学会JS翻书效果

     2019-12-21 14:42:59
    如何使用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>

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

    收起
    展开全文
    CSS CSS3

  • react双面翻书效果.zip

     2020-12-10 10:40:00
    react加css3实现双面翻书的效果
    收起

  • 基于Turn.js 实现翻书效果实例解析

     2020-11-23 09:14:52
    其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，之前他曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人...
    收起

  • 优雅的js翻页效果分享下载

     2021-06-30 17:26:23
    js翻页
    收起

  • javascript移动端 电子书 翻页效果实现代码

     2020-10-16 11:04:29
    主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    收起

  • Js 翻书效果

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

  • 翻书效果js

     2012-07-03 21:29:38
    翻书效果js
    收起

  • turn.js异步加载实现翻书效果

     2020-10-16 16:01:31
    主要为大家详细介绍了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实现图书翻页效果实例代码

     2020-10-20 10:13:36
    主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
    收起

  • Unity翻书翻牌效果_js翻书效果

     2021-01-10 21:18:59
    可先到 https://czhenya.blog.csdn.net/article/details/112443718 文章看效果，是否是自己需要的，再决定是否下载。支持当前所有Unity版本，有任何问题都可私信哦。
    收起

  • 【翻书特效 源代码---JS实现，附效果】

     2021-08-15 11:58:56
    效果 效果比较简单，是在浏览器运行实现的。 源代码 至于具体的图片，大家可以根据需求自行添加即可~ 下面是源代码。 <... <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>
    收起
    展开全文
    CSS html

  • 多功能电子相册翻书页效果特效HTML+css+js代码

     2022-03-09 15:55:50
    网页电子相册翻书页特效，html代码，自适应电脑手机版
    收起

  • JS实现翻书效果图片浏览

     2011-09-29 13:56:11
    JS实现翻书效果图片浏览 JS实现翻书效果图片浏览 JS实现翻书效果图片浏览
    收起

  • JS实现图片翻书效果示例代码

     2020-10-26 22:34:29
    图片翻书效果想必大家都有见过吧，在本文将为大家介绍下使用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翻书效果