Turn.js 实现翻书效果

xuruilll

已于 2024-01-07 20:51:50 修改

阅读量1k

点赞数 7

分类专栏：前端文章标签： javascript

于 2024-01-07 20:51:04 首次发布

本文链接：https://blog.csdn.net/xuruilll/article/details/135444474

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML5网页中利用turn.js前端翻页组件，实现逼真的图片翻页效果，包括代码示例和页面布局调整，以适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

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

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

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

接下来是使用过程：

1、引入js

<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本身不带有点击翻页效果，加了特定区域点击实现翻页效果。

<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>