jQuery手机触屏滑动翻书代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机触屏滑动翻书代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机触屏滑动翻书代码</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<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 class="flipbook-viewport">
	<div class="container">
		<div class="flipbook">
			<div style="background-image:url(pages/1.jpg)"></div>
			<div style="background-image:url(pages/2.jpg)"></div>
			<div style="background-image:url(pages/3.jpg)"></div>
			<div style="background-image:url(pages/4.jpg)"></div>
			<div style="background-image:url(pages/5.jpg)"></div>
			<div style="background-image:url(pages/6.jpg)"></div>
			<div style="background-image:url(pages/7.jpg)"></div>
			<div style="background-image:url(pages/8.jpg)"></div>
			<div style="background-image:url(pages/9.jpg)"></div>
			<div style="background-image:url(pages/10.jpg)"></div>
			<div style="background-image:url(pages/11.jpg)"></div>
			<div style="background-image:url(pages/12.jpg)"></div>
		</div>
	</div>
</div>
<script type="text/javascript">
function loadApp() {

	// Create the flipbook

	$('.flipbook').turn({
			// Width

			width:922,
			
			// Height

			height:600,

			// Elevation

			elevation: 50,
			
			// Enable gradients

			gradients: true,
			
			// Auto center this flipbook

			autoCenter: true

	});
}

// 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: ['css/basic.css'],
	complete: loadApp
});
</script>
</body>
</html>

JS代码(basic.js):

/* * Basic sample*/
function addPage(page,book){
	var id,pages = book.turn('pages');
	// Create a new element for this pagevar element = $('<div />',{
}
);
	// Add the page to the flipbookif (book.turn('addPage',element,page)){
	// Add the initial HTML// It will contain a loader indicator and a gradientelement.html('<div class="gradient"></div><div class="loader"></div>');
	// Load the pageloadPage(page,element);
}
}
function loadPage(page,pageElement){
	// Create an image elementvar img = $('<img />');
	img.mousedown(function(e){
	e.preventDefault();
}
);
	img.load(function(){
	// Set the size$(this).css({
	width:'100%',height:'100%'}
);
	// Add the image to the page after loaded$(this).appendTo(pageElement);
	// Remove the loader indicatorpageElement.find('.loader').remove();
}
);
	// Load the pageimg.attr('src','pages/' + page + '.jpg');
}
function loadLargePage(page,pageElement){
	var img = $('<img />');
	img.load(function(){
	var prevImg = pageElement.find('img');
	$(this).css({
	width:'100%',height:'100%'}
);
	$(this).appendTo(pageElement);
	prevImg.remove();
}
);
	// Loadnew pageimg.attr('src','pages/' + page + '-large.jpg');
}
function loadSmallPage(page,pageElement){
	var img = pageElement.find('img');
	img.css({
	width:'100%',height:'100%'}
);
	img.unbind('load');
	// Loadnew pageimg.attr('src','pages/' + page + '.jpg');
}
// http://code.google.com/p/chromium/issues/detail?id=128488function isChrome(){
	return navigator.userAgent.indexOf('Chrome')!=-1;
}

CSS代码(basic.css):

/* Basic sample */
body{overflow:hidden;background-color:#fcfcfc;margin:0;padding:0;}
.flipbook-viewport{overflow:hidden;width:100%;height:100%;}
.flipbook-viewport .container{position:absolute;top:50%;left:50%;margin:auto;}
.flipbook-viewport .flipbook{width:922px;height:600px;left:-461px;top:-300px;}
.flipbook-viewport .page{width:461px;height:600px;background-color:white;background-repeat:no-repeat;background-size:100% 100%;}
.flipbook .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);}
.flipbook-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;}
.flipbook-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;}

附件:下载该文件资源,减少时间成本(增值服务)