ocean-pages-turn

The command line app for ocean-pages-turn

Install

$ npm i ocean-pages-turn

Features

• 翻书特效

Usage

1、js中导入

import 'ocean-pages-turn'

2、dom结构

<div class="bb-custom-wrapper">
	<div id="bb-bookblock" class="bb-bookblock">
		<div class="bb-item">
			<img src="images/1.jpg" alt="image01"/>
		</div>
		<div class="bb-item">
			<img src="images/2.jpg" alt="image02"/>
		</div>
		<div class="bb-item">
			<img src="images/3.jpg" alt="image03"/>
		</div>
		<div class="bb-item">
			<img src="images/4.jpg" alt="image04"/>
		</div>
		<div class="bb-item">
			<img src="images/5.jpg" alt="image05"/>
		</div>
	</div>
	<nav>
		<a id="bb-nav-first" href="#">First</a>
		<a id="bb-nav-prev" href="#">Prev</a>
		<a id="bb-nav-next" href="#">Next</a>
		<a id="bb-nav-last" href="#">Last</a>
	</nav>
</div>

3、html中引入配置

<script>
	var Page = (function() {
		var config = {
				$bookBlock : $( '#bb-bookblock' ),
				$navNext : $( '#bb-nav-next' ),
				$navPrev : $( '#bb-nav-prev' ),
				$navFirst : $( '#bb-nav-first' ),
				$navLast : $( '#bb-nav-last' )
			},
			init = function() {
				config.$bookBlock.bookblock( {
					speed : 800
				} );
				initEvents();
			},
			initEvents = function() {
				
				var $slides = config.$bookBlock.children();

				// 下一页
				config.$navNext.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'next' );
					return false;
				} );
				// 上一页
				config.$navPrev.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'prev' );
					return false;
				} );

				// 第一页
				config.$navFirst.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'first' );
					return false;
				} );

				// 最后一页
				config.$navLast.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'last' );
					return false;
				} );
				
				// 设置手指滑动
				$slides.on( {
					'swipeleft' : function( event ) {
						config.$bookBlock.bookblock( 'next' );
						return false;
					},
					'swiperight' : function( event ) {
						config.$bookBlock.bookblock( 'prev' );
						return false;
					}
				} );

				// 监听键盘事件，键盘左右键翻书
				$( document ).keydown( function(e) {
					var keyCode = e.keyCode || e.which,
						arrow = {
							left : 37,
							up : 38,
							right : 39,
							down : 40
						};

					switch (keyCode) {
						case arrow.left:
							config.$bookBlock.bookblock( 'prev' );
							break;
						case arrow.right:
							config.$bookBlock.bookblock( 'next' );
							break;
					}
				} );
			};

			return { init : init };

	})();
	Page.init();
</script>