turnjs4翻书效果

本文介绍如何使用TurnJS4库创建逼真的网页翻书效果,为用户提供沉浸式的阅读体验。通过实例代码和步骤说明,详细阐述了翻书效果的实现过程,适用于电子杂志、在线图书等项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值