6

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

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

但是在按照页面上的这些说明进行操作后，我的活页簿的工作方式与示例书完全不同。

我尝试使用提供的示例并将其分解为多个部分以使我的工作，但我还没有更接近解决这个问题，并且示例包含一堆其他脚本，我不确定它们是否需要缩放或者是用于其他事情。

不确定我是否遗漏了一些非常简单的东西，或者我的代码是否真的关闭但我的 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);

    });
4

4 回答 4

8

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

查看示例，您应该找到代码：

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

希望这可以帮助！

于 2013-08-04T16:45:37.530 回答
8

要让 zoom 与 turn.js 一起工作，您需要做三件事：

  1. 设置正确的 dom 结构，如果没有“容器”div 来包装动画书，缩放将无法工作。

    <div class="magazine-viewport">
    <div class="container">
            <div class='magazine'>
                <div id='p1'><img src='book_1.jpg'></div>   
                <div id='p2'><img src='book_2.jpg'></div>               
            </div>
    </div>
</div>

  2. 设置js事件

    $( document ).ready(function() {
    //Initialize the turn.js flipbook
    $('.magazine').turn({
            width: 1136,
            height:734,
            pages:100,
            autoCenter: false,
            when:{
                missing: function (e, pages) {                      
                    for (var i = 0; i < pages.length; i++) {
                        $('.magazine').turn('addPage',page[pages[i]],pages[i]);
                    }
                }
            }
    });

    //Initialize the zoom viewport
    $('.magazine-viewport').zoom({
            flipbook: $('.magazine')
    });

    //Binds the single tap event to the zoom function
    $('.magazine-viewport').bind('zoom.tap', zoomTo);

    //Optional, calls the resize function when the window changes, useful when viewing on tablet or mobile phones
    $(window).resize(function() {
        resizeViewport();
    }).bind('orientationchange', function() {
        resizeViewport();
    });

    //Must be called initially to setup the size
    resizeViewport();
}

function page(num){
    var elem = $('<div />',{}).html('<div><img src="book_'+num+'.jpg></div>');
    return elem;
}

function zoomTo(event) {       
        setTimeout(function() {
            if ($('.magazine-viewport').data().regionClicked) {
                $('.magazine-viewport').data().regionClicked = false;
            } else {
                if ($('.magazine-viewport').zoom('value')==1) {
                    $('.magazine-viewport').zoom('zoomIn', event);
                } else {
                    $('.magazine-viewport').zoom('zoomOut');
                }
            }
        }, 1);
}

function resizeViewport() {
    var width = $(window).width(),
        height = $(window).height(),
        options = $('.magazine').turn('options');

    $('.magazine-viewport').css({
        width: width,
        height: height
    }).zoom('resize');
}

  3. 为元素定义适当的 css 样式，这里的技巧是杂志类的负坐标由容器类的顶部和左侧偏移量补偿。

    .magazine-viewport .container{
    position:absolute;
    top:367px;
    left:568px;
    width:1136px;
    height:734px;
    margin:auto;
}

.magazine-viewport .magazine{
    width:1136px;
    height:734px;
    left:-568px;
    top:-367px;
}

/* Important: the image size must be set to 100%.
 *  Otherwise the position of the images would be messed up upon zooming.
 */
.magazine img{
    width:100%;
    height:100%;
}

这应该让它工作，如果你想在缩放时加载更大版本的图像，请查看杂志示例中的 loadSmallPage() 和 loadLargePage() 函数。

于 2014-01-31T20:55:22.347 回答
4

我有同样的问题，但我决定只使用第三方缩放插件（杰克摩尔的 jQuery 缩放）。事实证明，站点中的示例要复杂得多，使用 json 为每个段落创建不同的区域和图像。

这实际上取决于您使用 turn.js 的目的，但我认为文档不正确，或者软件本身缺少某些内容。无论哪种方式，我都建议您考虑使用其他解决方案来解决该问题。

于 2013-10-22T19:45:13.360 回答
0

turn.js 提供了一个缩放示例。使其工作的困难在于收集所有必需的文件。但是如果你看代码，这是可能的。假设根是杂志，它会向上两个文件夹获取 lib 和放置 java 脚本的 extras 文件夹。此外，您必须在 pages 文件夹中添加“默认”和大页面。当你拿到样本时，里面只有缩略图。比如说1-thumb.jpg，你必须添加1.jpg和1-large.jpg

有一个非常有用的 Firefox 插件可以获取它们：CacheViewer。

我已经设法用我的书做到了这一点，并重新组织了代码中的路径以获得更清晰的内容：将 lib 和 extras 放在与 pages 相同的级别。“/../../”的递归 grep 将为您提供 html 和 js 代码中的所有位置。

于 2014-09-11T17:17:17.643 回答