html5手机翻书效果代码,移动端H5开发 Turn.js实现很棒的翻书效果

//判断手机类型

window.onload = function () {

//alert($(window).height());

var u = navigator.userAgent;

if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机

} else if (u.indexOf('iPhone') > -1) {//苹果手机

//屏蔽ios下上下弹性

$(window).on('scroll.elasticity',function (e) {

e.preventDefault();

}).on('touchmove.elasticity',function (e) {

e.preventDefault();

});

} else if (u.indexOf('Windows Phone') > -1) {//winphone手机

}

//预加载

loading();

}

var date_start;

var date_end;

date_start = getNowFormatDate();

//加载图片

var loading_img_url = [

"./image/0001.jpg","./image/0002.jpg","./image/0003.jpg","./image/0004.jpg","./image/0005.jpg","./image/0006.jpg","./image/0007.jpg","./image/0008.jpg","./image/0009.jpg","./image/0010.jpg","./image/0011.jpg","./image/0012.jpg","./image/0013.jpg","./image/0014.jpg","./image/0015.jpg","./image/0016.jpg","./image/0017.jpg","./image/0018.jpg","./image/0019.jpg","./image/0020.jpg","./image/0021.jpg","./image/0022.jpg","./image/0023.jpg","./image/0024.jpg","./image/0025.jpg","./image/0026.jpg","./image/0027.jpg","./image/0028.jpg","./image/0029.jpg","./image/0030.jpg","./image/0031.jpg","./image/0032.jpg","./image/0033.jpg","./image/0034.jpg","./image/0035.jpg","./image/0036.jpg","./image/0037.jpg","./image/0038.jpg","./image/0039.jpg","./image/0040.jpg","./image/0041.jpg",];

//加载页面

function loading() {

var numbers = 0;

var length = loading_img_url.length;

for (var i = 0; i < length; i++) {

var img = new Image();

img.src = loading_img_url[i];

img.onerror = function () {

numbers += (1 / length) 100;

}

img.onload = function () {

numbers += (1 / length) 100;

$('.number').html(parseInt(numbers) + "%");

console.log(numbers);

if (Math.round(numbers) == 100) {

//$('.number').hide();

date_end = getNowFormatDate();

var loading_time = date_end - date_start;

//预加载图片

$(function progressbar() {

//拼接图片

$('.shade').hide();

var tagHtml = "";

for (var i = 1; i <= 41; i++) {

if (i == 1) {

tagHtml += '