TurnJS4：实现网页翻书特效-优快云博客

本文链接：https://blog.youkuaiyun.com/leiwuxing/article/details/48931207

本文介绍如何使用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
        });
    }
}

turnjs4翻书效果