turn.js 翻书效果

危飞跃

2023-12-01

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>

// 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;
}

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

turn.js 翻书效果

相关阅读

相关文章

相关问答

相关文档