turn.js 翻书效果_turnjs peel

作者：知新_RL | 2024-02-19 23:08:17

踩

turnjs peel

turn.js 实现翻书效果，自适应pc端、手机端、ipad，可以左右滑动翻页

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>宣传手册</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--jquerymobile 自带的loading隐藏-->
<style>
	.ui-loader-default{ display:none}
	.ui-mobile-viewport{ border:none;}
	.ui-page {padding: 0; margin: 0; outline: 0} 
	* { touch-action: pan-y; };
</style>   
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- <script type="text/javascript" src="./js/jquery.min.1.7.js"></script> -->
<script type="text/javascript" src="./js/modernizr.2.5.3.min.js"></script>

</head>
<body >
    <div id="canvas">
    <div class="magazine-viewport">
        <div class="container" >
            <div class="magazine">
			<div ignore="1" class="next-button next-button-hover"></div>
			<div style="background:url(images/0001.jpg) top center no-repeat;background-size:100%;background-color:#293984;"></div>
			<div style="background:url(images/0002.jpg) top center no-repeat;background-size:100%;background-color:#293984;"></div>
				.........
			<div ignore="1" class="previous-button"></div>
		</div>
		<!--移动端上下翻页和刷新返回首页-->
		<div class="mobile_bottom">
			<div class="m_bottm_box">
				<div class="m_bottom_img pre"><img src="./images/ld.png"  alt="" srcset=""></div>
				<div class="m_bottom_img refresh" style="display: none;"><img src="./images/refresh.png"  alt="" srcset=""></div>
				<div class="m_bottom_img next"><img src="./images/rd.png" alt="" srcset=""></div>
			</div>
		</div>
	</div>
</div>
</div>

<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script> -->
<script type="text/javascript">
var w = $(window).width();
var h = $(window).height();
// console.log(w,h)
var isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent)?true:false;
var isPad = /iPad/i.test(navigator.userAgent);
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", isPortrait, false);
function isPortrait() {
	console.log(window.orientation)
	if (window.orientation === 180 || window.orientation === 0) { 
	console.log('竖屏');

	return true;
	} 
	if (window.orientation === 90 || window.orientation === -90 ){ 
	console.log('横屏');
		if(isPad){
			$(".mobile_bottom").css("display", "none");
		}
	return false;
	} 
}
function loadApp() {
	// Create the flipbook
    console.log(isMobile,"isMobile")
    $('#canvas').fadeIn(1000);
    var flipbook = $('.magazine');
    if (flipbook.width()==0 || flipbook.height()==0) {
		setTimeout(loadApp, 10);
		return;
	}
	if(isMobile){
		$(".mobile_bottom").css("display", "flex");
		
	}else{
		$(".mobile_bottom").css("display", "none");
	}
	flipbook.turn({
			width:isMobile && !isPad?w: 922,
			// Magazine height
			height:isMobile && !isPad?h: 680,
			display:isMobile && !isPad?"single":"double",
            acceleration:isMobile?true:false,
			// Elevation
			elevation: 500,
            duration: 1000,
			// Enable gradients
			gradients: true,
			// Auto center this flipbook
			autoCenter: true,
            pages: 18,
			turnCorners: "bl,br,tl,tr,l.r",
            when: {
				turning: function (e, page, view) {
					if (page == 1) {
						$('.next-button').css("display", "none");
						$('.previous-button').removeClass('previous-button-hover');
						$(".refresh").css("display", "none");
					} else {
						$(".refresh").css("display", "block");
					
					}
					if (page == 18) {
						$('.next-button').css("display", "none");
						$(".nextPage").css("display", "none");
					} else {
						$(".nextPage").css("display", "block");
					}
				},
				turned: function (e, page, view) {
					console.log(page);
					if(!isMobile || isPad){
						$(this).turn('peel','br');
					}
					var total = $(".magazine").turn("pages");//总页数
					if (page == 1) {
						$('.next-button').css("display", "none");
						$('.previous-button').removeClass('previous-button-hover');
						
					} else {
						$(".refresh").css("display", "block");
						$('.previous-button').addClass('previous-button-hover');
					}
				
					if (page == 18) {
						$('.next-button').css("display", "none");
						$('.previous-button').addClass('previous-button-hover');
						// setTimeout(function(){
						// 	$('.magazine').turn('page', 1);
						// },1000)
					} else {
						$(".next-button").css("display", "block");
					}
				}
			}

	});
	$(window).resize(function() {
		w = $(window).width();
		h = $(window).height();
		window.location.reload();
		resizeViewport();
	}).bind('orientationchange', function() {
		resizeViewport();
	});
    

	// Events for the next button

	$('.next-button').click(function() {
		
		$('.magazine').turn('next');

	});

	// Events for the next button
	
	$('.previous-button').click(function() {
		
		$('.magazine').turn('previous');

	});

	resizeViewport();
	$('.magazine').addClass('animated');
}

$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform

yepnope({
	test : Modernizr.csstransforms,
	yep: ['./js/turn.js'],
	nope: ['./js/turn.html4.min.js',],
    both: ['./js/zoom.min.js','./js/demo2.js', './css/demo2.css'],
	complete: loadApp
});

</script>
<script>
    //自定义仿iphone弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            var defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            var $dom = $(this);

            var dom = $('<div class="g-plugin-confirm">');
            var dom1 = $('<div>').appendTo(dom);
            var dom_content = $('<div>').html(o.title).appendTo(dom1);
            var dom_btn = $('<div>').appendTo(dom1);
            var btn_cancel = $('<span></span>').html(o.cancelText).appendTo(dom_btn);
            var btn_ok = $('<span></span>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $(".pre").bind("touchend", function () {
        var pageCount = $(".magazine").turn("pages");//总页数
        var currentPage = $(".magazine").turn("page");//当前页
        if (currentPage >= 2) {
            $(".magazine").turn('page', currentPage - 1);
        } 
    });
    // 下一页
    $(".next").bind("touchend", function () {
        var pageCount = $(".magazine").turn("pages");//总页数
        var currentPage = $(".magazine").turn("page");//当前页
        if (currentPage < pageCount) {
            $(".magazine").turn('page', currentPage + 1);
        } 
    });
    //返回到目录页
    $(".refresh").bind("touchend", function () {
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".magazine").turn('page', 1); //跳转页数
        }, function () {
        });
    });
    // 移动端增加左右滑动翻页，turn.js本身不可左右滑动翻页，点击四个角是可以的
	$(window).on( "swipeleft", function( event ) { 
	    $('.magazine').turn('next');
	} );
	$(window).on( "swiperight", function( event ) { 
			$('.magazine').turn('previous')
	} );
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

// demo2.js
function resizeViewport() {
	var width = $(window).width(),
		height = $(window).height(),
		options = $('.magazine').turn('options');
	$('.magazine').removeClass('animated');

	$('.magazine-viewport').css({
		width: width,
		height: height
	})


	if ($('.magazine').turn('zoom')==1) {
		var bound = calculateBound({
			width: options.width,
			height: options.height,
			boundWidth: Math.min(options.width, width),
			boundHeight: Math.min(options.height, height)
		});

		if (bound.width%2!==0)
			bound.width-=1;

			
		if (bound.width!=$('.magazine').width() || bound.height!=$('.magazine').height()) {

			$('.magazine').turn('size', bound.width, bound.height);

			if ($('.magazine').turn('page')==1)
				$('.magazine').turn('peel', 'br');

			$('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
			$('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
		}

		$('.magazine').css({top: -bound.height/2, left: -bound.width/2});
	}

	$('.magazine').addClass('animated');
	
}


function calculateBound(d) {
	
	var bound = {width: d.width, height: d.height};

	if (bound.width>d.boundWidth || bound.height>d.boundHeight) {
		
		var rel = bound.width/bound.height;

		if (d.boundWidth/rel>d.boundHeight && d.boundHeight*rel<=d.boundWidth) {
			
			bound.width = Math.round(d.boundHeight*rel);
			bound.height = d.boundHeight;

		} else {
			
			bound.width = d.boundWidth;
			bound.height = Math.round(d.boundWidth/rel);
		
		}
	}
		
	return bound;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

css

//demo2.css
body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.magazine-viewport .container{
	position:absolute;
	top:50%;
	left:50%;
	width:922px;
	height:600px;
	margin:auto;
}

.magazine-viewport .magazine{
	width:922px;
	height:600px;
	left:-461px;
	top:-300px;
}

.magazine-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
	/* background-color:#293a8476; */
	background-color: transparent;

}

.magazine-viewport .zoomer .region{
	display:none;
}


.magazine .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.magazine-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.mobile_bottom{
	height:50px;
	width:100%;
	background:transparent;
	position:fixed;
	bottom:15px;
	left:0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index:222	
}
.m_bottm_box{
	width: 922px;height:100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.m_bottom_img{
	height: 35px;
	width: 35px;
	z-index:222	
}
.m_bottom_img img{
	max-width:100%
}

/*弹出窗口*/
.g-plugin-confirm {
	position: fixed;
	z-index: 9999999999999;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	/*background: rgba(0, 0, 0, 0.1);*/
	background-color: rgba(0 ,0, 0, 0.35);
	justify-content: center;
	align-items: center;
}
/* line 397, global.sass */
.g-plugin-confirm > div {
	background: rgba(255, 255, 255, 0.9);
	width: 80%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
/* line 402, global.sass */
.g-plugin-confirm > div > div:nth-child(1) {
	text-align: center;
	color: black;
	padding: 22px;
}
/* line 406, global.sass */
.g-plugin-confirm > div > div:nth-child(2) {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	border-top: 1px solid #cbcbd1;
}
/* line 409, global.sass */
/* line 409, global.sass */
.g-plugin-confirm > div > div:nth-child(2) span {
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	border-right: 1px solid #cbcbd1;
	text-align: center;
	padding: 8px 0;
	color: #3b64c0;
	font-size: 20px;
}
.g-plugin-confirm > div > div:nth-child(2) span:first-child{
	color: #8d8383;
	border-bottom-left-radius:10px;
	
}
/* line 416, global.sass */
.g-plugin-confirm > div > div:nth-child(2) span:last-child {
	border-right: 0;
	border-bottom-right-radius:10px;
}


.magazine-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.magazine-viewport .next-button,
.magazine-viewport .previous-button{
	width:22px;
	height:100%;
	position:absolute;
	top:0;
}

.magazine-viewport .next-button{
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.magazine-viewport .previous-button{
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
	background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
	background-image:url(../images/arrows.png);
	background-position:-4px 50%;
	background-repeat:no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
	background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
	background-image:url(../images/arrows.png);
	background-position:-38px 50%;
	background-repeat:no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
	display:none;
}

.animated{
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227

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