Javascript 如何使用turn.js实现缩放

我正在尝试使用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>

---

您的代码没有显示所有内容（例如，HTML中的where“.fullscreen”或“zoom button”），因此我的答案可能不准确

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

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

这似乎不同于turn（'缩放'，…），并且似乎没有记录在案。此函数将放大定义为转弯对象的图元。我相信，对于您来说，这是您的“#动画书”元素，而不是“.杂志”视口

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

因此，我认为您需要这样的东西（至少从一开始就尝试）：

---

希望这有帮助

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

---

这实际上取决于您使用turn.js的目的，但我认为文档不正确，或者软件本身缺少一些东西。无论如何，我建议您考虑使用其他解决方案解决此问题。

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

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

<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>

---

如果您想在缩放时加载更大版本的图像，请查看杂志示例中的loadSmallPage（）和loadLargePage（）函数。

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

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

---

我已经设法用我的书做到了这一点，并重新组织了代码中的路径，使之更干净：将lib和extra放在与页面相同的级别上。“/.././”的递归grep将提供html和js代码中的所有位置。

同样的问题，文档在解释如何实际实现zoomI时相当不完整。Zoomooz.js插件使用起来太简单了。。。。如果你有任何疑问，你可以问我这个插件。如果你可以试试这个，如何使turnjs全屏？在steve示例中，我想要一本全屏书。至少接近全屏大小。嘿，这对我的书不起作用，但它解释了如何使用zoon比网站好100倍。我想我将能够使用这个例子来获得缩放效果，我很高兴它在某种程度上有所帮助@AndyMudrak如何使turnjs全屏化？在steve示例中，我想要一本全屏书。至少接近全屏大小。我怎样才能为它添加响应功能？这非常有用！小提示：我将

container

的

top

和

left

属性设置为

0px

，并从

杂志中删除
top
和
left
，谢谢！你帮了我很多
$('#flipbook').click(function(e) {
    var pos = {
        x: e.pageX - $(this).offset().left,
        y: e.pageY - $(this).offset().top
    };
    $('#flipbook').zoom('zoomIn', pos);
});

<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>

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

.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%;
}