turnjs4翻书效果

来源：互联网发布：linux yum命令有什么用编辑：程序博客网时间：2024/05/01 15:07

$(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        });    }}

0 0