2 创建html
devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

turn.js （翻页效果）总结_trun.js单张翻页

作者：很楠不爱3 | 2024-02-19 23:02:02

赞

踩

trun.js单张翻页

 

Turn.js是一个内置的jQuery翻页插件

1 html中引入<script type="text/javascript" src="js/turn.js"></script>

2  创建html

<div id="flipbook">
  <div class="hard"> Turn.js </div> 
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

3 javascript 部分

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

4.可用选项、属性、方法、事件、css类

　选项：

(1)acceleration:设置硬件加速模式，对于触摸设备，此值必须为真。
   acceleration:true;
(2)direction:指定flipbook从左到右(DIR=ltr，默认值)或右向左(DIR=rtl)的方向。
　　a.$("#flipbook").turn({
　　　　direction:'rtl'
　　　})
　　b.<div id="flipbook" dir="rtl"></div>
　　c.#flipbook{
　　  　　direction:rtl
  　　}
(3)duration:设置翻页的速度 
　　duration:600 如果设置为0 则不会产生翻页效(4) gradients：翻页过程中显示渐变和阴影
　　 gradients:true
(5) width:页面的宽度 height:页面的高度
    width:num height:num
(6) elevation：转换期间页面的高度
    elevation:0
(7) page：初始化时设置页面个数
　　 page:1
(8) pages:设置任意数量的页面。如果页面的数量大于#flipbook中元素的数量，使用addPage方法动态地添加这些页面。
    $("#flipbook").children().length()
(9) when:事件侦听器。键必须在事件列表中使用
    $("#flipbook").turn({
　　　　when:{
　　　　　　turned: function(e, page) {
　　　　　　　　if(page==1){
　　　　　　　　}
　　　　　　　　if(page==2){
　　　　　　　　}
　　　　　　}
　　　　}
　　})
属性：
(1) animating:当折叠的页面显示时返回true，

　　function isAnimating() {
  　　if ($("#flipbook").turn("animating")) {
    　　alert('Animating a page!');
  　　}
　　}
  (2)direction: 返回当前翻页的方向
     $("#flipbook).turn("direction")
  (3)display：获取当前显示的是单页还是双页
     $("#flipbook).turn("display")
  (4)page:获取当前页面为第几页
     $("#flipbook).turn("page")
  (5)pages:获取总共有多少页
    $("#flipbook").turn("pages")
  (6)size：获取flipbook的高宽
    $("#flipbook").turn("size")  获取出有两个值 size.width 和 size.height
 方法:
  (1) addpage:将页面添加到flipbook中 
      例如插入第10页:
      element=$("<div />").html("loading");
　　　$("#flipbook").turn("addpagge",element,10)
   (2) destroy：删除所有页面
       $("#flipbook").turn("destroy").remove();
   (3) direction :设置flipbook 的方向
       $("#flipbook").turn("direciton","rtl")
   (4) display：设置单页还是双页
       $("#flipbook").turn("display","single")   
   (5) next 把视图转到下一个
       $("#flipbook").turn("next")
       $("#flipbook").turn("next").turn("next")
   (6) options:更改选项的值 
       $("#flipbook").turn("options",{display:"single",duration:})
   (7) page：跳到指定的页面
       $("#fllipbook").turn("page",10)
   (8) previous:转到前面的视图
    　 $("#flipbook").turn("previous")
   (9) removepage：删除指定的页面
       $("#flipbook").turn("removepage"，10)
   (10) resize:重新计算页面的大小
      $("flipbook").turn("resize")
   (11) stop:停止当前的过渡
      $("#flipbook").turn("page",10).turn("stop")
   (12)version:获取当前发布的版本
　　　$("#flipbook").turn("version")
   (13)zoom:flipbook的缩放比例 
　　　 $("#flipbook").turn("zoom",0.5) 例如当值为0.5时 缩小为原来的一半 当值为1时 则不改变大小
   事件：
   (1) end：事件在页面停止时触发
       $("#flipbook").bind("end",function(event,pageobject,turned){
　　　　　　alert("turn.end:"+pageobject.page)
       })
　　(2)first：当当前页面为1时触发此事件
       $("#flipbook").bind("first",function(event){
       　　alert("page1")
       })
     (3)last：当当前页面为最后一页时触发此事件
      $("#flipbook").bind("last",function(event){
　　　　  alert("page_last")
　　  })
      (4)missing：当当前范围需要某些页面时 触发此事件
 　　　$("#flipbook").bind("missing",function(event,pages){
　　　　　　for(var i=0;i<pages.length;i++){
　　　　　　　　$(this).turn("addpage",$("<div/>"),pages[i])
　　　　　　}
       })
      (10) addpage：将页面插入到flipbook
　　　　　 element=$("<div/>").html("loading...")
           $("#flipbook").turn("addpage",element,10) 插入第10页
      (11) start：页面启动时触发
           $("#flipbook").bind("start",function(event,pageobject,corner){
　　　　　　　　if(corner=="tl"||corner=="tr"){
　　　　　　　　　　　event.preventDefault();　　　
　　　　　　　　}
           })
           当翻动左角和右角时，禁止启动动画
      (12)turning：翻页之前被启动
　　　　　$("#flipbook").bind("turning",function(event,page,view){
             alert("turning the page to"+page)
          })
         翻页之前 弹出即将翻开的是第几页
      (13)turned：翻页完成之后启动
          $("#flipbook").bind("turned",function(event,page,view){
　　　　　　alert("page"+page)
          })
      (14)zooming:当缩放改变时触发此事件

　　　　　　$("#flipbook").bind("zooming", function(event,  newZoomValue, currentZoomValue) {
  　　　　　　　　alert("New zoom: "+currentZoomValue);
　　　　　　});
　　
事例代码：
  1. 	//这里先引入两个外部cdn文件，方便打开查看效果：
  2. 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  3. 	<script type="text/javascript" src="https://cdn.bootcss.com/turn.js/3/turn.min.js"></script>
  4. 然后添加简单的样式；
  5. 	<style type="text/css">
  6. 		body {
  7. 			background: #ccc;
  8. 		}
  9.  
  10. 		#book {
  11. 			width: 800px;
  12. 			height: 500px;
  13. 		}
  14.  
  15. 		#book .turn-page {
  16. 			background-color: white;
  17. 		}
  18.  
  19. 		#book .cover {
  20. 			background: #333;
  21. 		}
  22.  
  23. 		#book .cover h1 {
  24. 			color: white;
  25. 			text-align: center;
  26. 			font-size: 50px;
  27. 			line-height: 500px;
  28. 			margin: 0px;
  29. 		}
  30.  
  31. 		#book .loader {
  32. 			background-image: url(loader.gif);
  33. 			width: 24px;
  34. 			height: 24px;
  35. 			display: block;
  36. 			position: absolute;
  37. 			top: 238px;
  38. 			left: 188px;
  39. 		}
  40.  
  41. 		#book .data {
  42. 			text-align: center;
  43. 			font-size: 40px;
  44. 			color: #999;
  45. 			line-height: 500px;
  46. 		}
  47.  
  48. 		#controls {
  49. 			width: 800px;
  50. 			text-align: center;
  51. 			margin: 20px 0px;
  52. 			font: 30px arial;
  53. 		}
  54.  
  55. 		#controls input,
  56. 		#controls label {
  57. 			font: 30px arial;
  58. 		}
  59.  
  60. 		#book .odd {
  61. 			background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
  62. 			background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
  63. 			background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
  64. 			background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
  65. 		}
  66.  
  67. 		#book .even {
  68. 			background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
  69. 			background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
  70. 			background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
  71. 			background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
  72. 		}
  73. 	</style>
  74. //接着是布局：
  75. 	<div id="book">
  76. 		<div class="cover">
  77. 			<!-- 这里是翻书页面 -->
  78. 		</div>
  79. 	</div>
  80. 	
  81. <!-- 这里是分页数据 -->
  82. 	<div id="controls">
  83. 		<label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span
  84. 			id="number-pages"></span>
  85. 	</div>
  86.  
  87. <!-- 以下是关键的js代码 -->
  88. <script type="text/javascript">
  89.  
  90. 		var numberOfPages = 100;
  91.  
  92. 		function addPage(page, book) {
  93. 			if (!book.turn('hasPage', page)) {
  94. 				var element = $('<div />', { 'class': 'page ' + ((page % 2 == 0) ? 'odd' : 'even'), 'id': 'page-' + page }).html('<i class="loader"></i>');
  95. 				book.turn('addPage', element, page);
  96. 				setTimeout(function () {
  97. 					element.html('<div class="data">Data for page ' + page + '</div>');
  98. 				}, 10);
  99. 			}
  100. 		}
  101.  
  102. 		$(window).ready(function () {
  103. 			$('#book').turn({
  104. 				acceleration: true,
  105. 				pages: numberOfPages,
  106. 				elevation: 50,
  107. 				gradients: !$.isTouch,
  108. 				when: {
  109. 					turning: function (e, page, view) {
  110. 						var range = $(this).turn('range', page);
  111. 						for (page = range[0]; page < range[1]; page++)
  112. 							addPage(page, $(this));
  113. 					},
  114.  
  115. 					turned: function (e, page) {
  116. 						$('#page-number').val(page);
  117. 					}
  118. 				}
  119. 			});
  120.  
  121. 			$('#number-pages').html(numberOfPages);
  122. 			$('#page-number').keydown(function (e) {
  123. 				if (e.keyCode == 13)
  124. 					$('#book').turn('page', $('#page-number').val());
  125.  
  126. 			});
  127. 		});
  128.  
  129. 		$(window).bind('keydown', function (e) {
  130.  
  131. 			if (e.target && e.target.tagName.toLowerCase() != 'input')
  132. 				if (e.keyCode == 37)
  133. 					$('#book').turn('previous');
  134. 				else if (e.keyCode == 39)
  135. 					$('#book').turn('next');
  136.  
  137. 		});
  138.  
  139. 	</script>
  140. 	<script>
  141. 		$("#book").on("touchstart", function (e) {
  142. 			// 判断默认行为是否可以被禁用
  143. 			if (e.cancelable) {
  144. 				// 判断默认行为是否已经被禁用
  145. 				if (!e.defaultPrevented) {
  146. 					e.preventDefault();
  147. 				}
  148. 			}
  149. 			startX = e.originalEvent.changedTouches[0].pageX,
  150. 				startY = e.originalEvent.changedTouches[0].pageY;
  151. 		});
  152. 		$("#book").on("touchend", function (e) {
  153. 			// 判断默认行为是否可以被禁用
  154. 			if (e.cancelable) {
  155. 				// 判断默认行为是否已经被禁用
  156. 				if (!e.defaultPrevented) {
  157. 					e.preventDefault();
  158. 				}
  159. 			}
  160. 			moveEndX = e.originalEvent.changedTouches[0].pageX,
  161. 				moveEndY = e.originalEvent.changedTouches[0].pageY,
  162. 				X = moveEndX - startX,
  163. 				Y = moveEndY - startY;
  164. 			//左右滑
  165. 			if (X > 50) {
  166. 				$('#book').turn('previous');
  167. 			}
  168. 			//右左滑
  169. 			else if (X < -50) {
  170. 				$('#book').turn('next');
  171. 			}
  172. 		});
  173. 	</script>

代码参考连接：https://blog.csdn.net/weixin_37787674/article/details/93214844

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/117217
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。