如何使用turn.js进行缩放
我正在尝试使用与网站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);
});Stack Overflow用户
发布于 2013-08-05 00:45:38
您的代码没有显示所有内容(例如，".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);
});希望这能有所帮助！
https://stackoverflow.com/questions/17607337
复制相似问题
腾讯云开发者
