Turn.js 实现翻书效果

2024-01-08 19:20

文章标签 实现 js 效果 turn 翻书

本文主要是介绍Turn.js 实现翻书效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

接到了任务，要把孩子画的画放到网页上去，翻页效果还要逼真一点。搜索到了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.41if(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>

这篇关于Turn.js 实现翻书效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！