javascript - 如何使用turn.js进行缩放

我正在尝试使用turn.js制作具有与http://www.turnjs.com/samples/magazine/网站上的示例相同功能的 Activity 簿

在查看如何实现这一目标时，我遇到了这些页面
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

但是按照页面上的这些说明操作后，我的 Activity 簿无法像示例中的那样工作。

我尝试使用提供的示例并将其分为多个部分以使我的工作正常进行，但我还没有进一步解决该问题，示例还包含许多其他脚本，因此我不确定缩放是否需要它们或用于其他东西。

不知道我是否错过了一些非常简单的东西，或者我的代码真的关闭了，但是我的html看起来像这样。

现在，单击“缩放”按钮时，我得到的只是书可放大150％

想知道是否有人可以告诉我要获得该变焦我缺少了什么？

<div class="row">
   <div id="zoom-viewport">
      <div id="flipbook">

          // wordpress loop

               <div class="page">
                    // page contents
               </div>

          // end loop

      </div>
   </div>
</div>

和jQuery

    //----------------------------
    // Initialize

    var _width = $('#flipbook-wrap').width(),
        _height = Math.round(70.909090909/100*_width),
        _winWidth = $window.width(),
        _winHeight = $window.height();

    $("#flipbook").turn({
        width: _width,
        height: _height,
        autoCenter: true
    });

    //----------------------------
    // Zoom in button

    $('.fullscreen').click(function(e){
        e.preventDefault();
        $("#flipbook").turn("zoom", 1.5);

    });

最佳答案

您的代码未显示所有内容(例如HTML中的“.fullscreen”或“缩放按钮”所在的位置)，因此我的答案可能并不准确。

查看示例，您应该找到以下代码:

$('.magazine-viewport').zoom('zoomIn', pos);

这似乎与turn('zoom'，...)不同，并且似乎没有记载。此功能将放大定义为转弯对象的元素。我相信，对您来说，这是您的“#flipbook”元素，而不是“.magazine-viewport”。

参数是“zoomIn”和pos，这可能是您当前使用的不同功能。 “pos”似乎是一个包含“x”和“y”属性的JS对象，用于定义您单击杂志的位置。这些坐标是相对于杂志而不是整个屏幕的，因此请记住这一点。

所以，我认为您需要这样的东西(至少在开始时尝试一下):

$('#flipbook').click(function(e) {
    var pos = {
        x: e.pageX - $(this).offset().left,
        y: e.pageY - $(this).offset().top
    };
    $('#flipbook').zoom('zoomIn', pos);
});

希望这可以帮助!

关于javascript - 如何使用turn.js进行缩放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17607337/