Turn.js 实现翻书效果

接到了任务,要把孩子画的画放到网页上去,翻页效果还要逼真一点。搜索到了turn.js这个前端翻页组件,效果不错。先上图看效果。

网页实际效果:星月夜诗集

turn.js的官网地址:Turn.js: The page flip effect in HTML5

接下来是使用过程:

1、引入js

javascript 复制代码
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/turn.min.js"></script>

2、html

加载images目录下的所有图片,图片名是以01、02、03......命名的png文件;根据屏幕比例和图片比例决定显示单页还是双页。turn.js本身不带有点击翻页效果,加了特定区域点击实现翻页效果。

javascript 复制代码
<body>
	<div id="filpbook">
	</div>
	<script type="text/javascript">
		var widscreen = true;
		var pageNum = 18;
		var wid = $(window).width();
		var hei = $(window).height();
		
		function pad(num, n) {  
			var len = num.toString().length;  
			while(len < n) {  
				num = "0" + num;  
				len++;  
			}  
			return num;  
		}
			
		$(document).ready(function() {
			var ratio = 1.41; // 654 / 464 = 1.41
			
			if(hei > wid) {
				widscreen = false;
				if(hei / wid > ratio) {
					hei = wid * ratio;
				}
				else {
					wid = hei / ratio;
				}
			}
			else {
				if(wid / hei > (ratio / 2)) {
					wid = hei / ratio;
				}
				else {
					hei = wid * ratio;
				}
			}
			
			var divp = $('#filpbook');

			for (var i = 1; i <= pageNum; i++) {
				var imgc = $('<img></img>');
				imgc.attr('src', './images/'+pad(i, 2)+'.png');
				imgc.attr('width', wid);
				imgc.attr('height', hei);
				
				var divc = $('<div></div>');
				divc.attr('id', 'page');
				
				divc.append(imgc);
				divp.append(divc);
			}
			
			if(widscreen) {
				$('#filpbook').turn({
					acceleration: true,
					pages: pageNum,
					elevation: 50,
					width: wid*2,
					height: hei,
					gradients: true,
					display: 'double',
					autoCenter: true,
					turnCorners: "",
					when: {
						truning: function(e, page,view) {},
						truned: function(e, page) {}
					}
				});
			}
			else {
				$('#filpbook').turn({
					acceleration: true,
					pages: pageNum,
					elevation: 50,
					width: wid,
					height: hei,
					gradients: true,
					display: 'single',
					autoCenter: true,
					turnCorners: "",
					when: {
						truning: function(e, page,view) {},
						truned: function(e, page) {}
					}
				});
			}
		});
		
		$('#filpbook').click(function(event) {
			//console.log(event.pageX+','+event.pageY);
			if(widscreen) {
				if((event.pageX > wid) && (event.pageY> 60) && (event.pageY < hei-60)) {
					$('#filpbook').turn("next");
				}
				
				if((event.pageX < wid) && (event.pageY> 60) && (event.pageY < hei-60)) {
					$('#filpbook').turn("previous");
				}
			}
			else {
				if((event.pageX > wid / 2) && (event.pageY> 60) && (event.pageY < hei-60)) {
					$('#filpbook').turn("next");
				}
				
				if((event.pageX < wid / 2) && (event.pageY> 60) && (event.pageY < hei-60)) {
					$('#filpbook').turn("previous");
				}
			}
		});
		
		$(window).bind('keydown', function(e) {
			if (e.target && e.target.tagName.toLowerCase()!='input')
				if (e.keyCode==37)
					$('#filpbook').turn('previous');
				else if (e.keyCode==39)
					$('#filpbook').turn('next');
		});
	</script>
</body>
相关推荐
3Katrina29 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper29 分钟前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor41 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃1 小时前
js事件机制:监听、捕获、冒泡与委托
javascript
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
独立开阀者_FwtCoder2 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
一只卡比兽2 小时前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
徐小夕2 小时前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六2 小时前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js