原生JS实现翻书特效
本文给大家分享一个用原生JS实现的翻书效果图，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现翻书特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#btn {
width: 50px;
height: 40px;
line-height: 40px;
position: relative;
left: 50%;
margin-left: -25px;
top: 100px;
}
#book {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
border: 1px solid black;
/* 第一个封面 */
background: url(images/0.jpg);
}
#rightPage {
width: 50%;
height: 100%;
position: absolute;
left: 50%;
z-index: 2;
transition: 0.5s;
transform: perspective(800px) rotateY(0px);
transform-origin: left center;
background: black;
transform-style: preserve-3d;
}
#rightPage #topNode {
position: absolute;
width: 100%;
height: 100%;
/* 第一个封面 */
background: url(images/0.jpg) 300px 0;
transform: translateZ(1px);
}
#rightPage #bottomNode {
position: absolute;
width: 100%;
height: 100%;
/* 第三个封面 */
background: url(images/2.jpg) 0 0;
/*scaleX将翻书镜像后的图像还原镜像*/
transform: translateZ(-1px) scaleX(-1);
}
#rightOtherPage {
position: absolute;
left: 50%;
height: 100%;
width: 50%;
/* 第三个封面 */
background: url(images/2.jpg) 300px 0;
z-index: 1;
}
</style>
</head>
<body>
<input type='button' value='下一页' id='btn'>
<div id='book'>
<div id='rightPage'>
<div id='topNode'></div>
<div id='bottomNode'></div>
</div>
<div id='rightOtherPage'></div>
</div>
<script type="text/javascript">
var index = 0;
var flag = false;
btn.onclick = function () {
if (flag) return;
flag = true;
index++;
rightPage.style.transition = '0.5s';
rightPage.style.transform = 'perspective(800px) rotateY(-180deg)';
setTimeout(function () {
// 翻页后瞬间更换下一页的背景
book.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
// 让翻页瞬间回去
rightPage.style.transition = '0s';
rightPage.style.transform = 'perspective(800px) rotateY(0deg)';
// 更换翻页纸正面背景
topNode.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
// 更换翻页纸背面背景
bottomNode.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
// 更换翻页后的纸背景
rightOtherPage.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
flag = false;
}, 500);
};
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
移动端H5开发 Turn.js实现很棒的翻书效果
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tur
-
基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.下面小编把我的学习心得分享给大家,大家可以参考下 Turn.js的官方网址: http://www.turnjs.com/ 下面是我这个项目上线后的效果: 看过实际项目后,各位
-
JS实现图片翻书效果示例代码
picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag
-
turn.js异步加载实现翻书效果
本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码,供大家参考,具体内容如下 1.阅读翻书js /** * 电子翻书 */ //var width = 1080; //var height = 1680; var width = "10rem"; var height = "15.2rem"; window.onload = function () { //预加载 //loading(18,1); initData(); } function getQ
-
基于JS实现翻书效果的页面切换样式
本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <
-
基于javascript html5实现3D翻书特效
这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果.书本中的文字和图片也会3D展示,非常酷. 在线演示 源码下载 HTML代码 <div class="book p3d"> <div class="back-cover p3d"> <div class="page back flip"></div> <div
-
js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下 -------------------------------------效果运行----------------------------------------- 为大家分享的
-
原生JS实现图片翻书效果
下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现图片翻书效果-懒人图库</title> <META
-
原生JS实现翻书特效
本文给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS实现翻书特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none;
-
原生JS实现的放大镜特效示例【测试可用】
本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">
-
原生JS实现目录滚动特效
分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻.动态.充值记录等,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <s
-
原生JS实现数码表特效
本文分享一个用原生JS实现的数码时钟特效,效果如下: 上面的数字是用的图片生成的,共10张图片如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现数码表特效</title> <
-
Unity3D UGUI实现翻书特效
本文实例为大家分享了Unity3D UGUI翻书展示的具体代码,供大家参考,具体内容如下 参考大佬的,链接找不到了,找到了再加在这. 下边是Shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Personal/PageTurning" { Properties { _Color ("Color", Color) = (
-
原生js简单实现放大镜特效
本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLeft 内容滚动的左边距