$(document).ready(function () { // Load the HTML4 version if there's not CSS transform yepnope({ test: Modernizr.csstransforms, yep: [ctx + 'resources/turnjs4/lib/turn.min.js'], nope: [ctx + 'resources/turnjs4/lib/turn.html4.min.js'], both: [ctx + 'resources/turnjs4/lib/scissor.min.js', ctx + 'resources/turnjs4/samples/double-page/css/double-page.css'], complete: loadApp }); });
function loadApp(){ $.ajax({ url: ctx + "/front/userwork/getBindStyleByWorksId",// 查询用户作品装订方式 data: {worksId: worksId}, type: 'post', cache: false, success: function (data) { makeBook(data); } }); }
function makeBook(previews) { //生成预览DOM结构 var html = ""; for (var i = 0; i < previews.length; i++) { var imgUrl = previews[i].scale_compose_image_path == null ? previews[i].scale_url : previews[i].scale_compose_image_path; html += '<div class="page">'; html += '<img src="' + imgUrl + '" class="f_img"/>'; html += '</div>'; } $(".flipbook").append(html); // 计算比例预览 var src = $(".f_img").first().attr("src"); var image = new Image(); image.src = src; image.onload = function () { //浏览器宽度(书本宽度) var screenWidth = $(window).width(); //图片宽高比计算 var imgWidth = image.width; var imgHeight = image.height; var scale = (imgWidth / imgHeight).toFixed(2); //计算等比情况下书本调试 var bookHeight = (screenWidth / 2 / scale).toFixed(2); //生成相册 $(".flipbook").css({"width": screenWidth + "px", height: bookHeight}); $(".page").css({"width": screenWidth + "px", height: bookHeight}); $(".double").css({"width": screenWidth + "px", height: bookHeight}); $(".f_img").css({"width": screenWidth / 2 + "px", height: bookHeight}); var flipbook = $('.flipbook'); // Check if the CSS was already loaded if (flipbook.width() == 0 || flipbook.height() == 0) { setTimeout(makeBook, 10); return; } $('.flipbook .double').scissor(); // Create the flipbook $('.flipbook').turn({ // Elevation elevation: 50, // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true }); } }