gpt4 book ai didi

javascript - 将双页添加到turnjs "book"

转载 作者:行者123 更新时间:2023-11-28 07:28:21 30 4
gpt4 key购买 nike

我创建了一个网站,访问者可以使用turnjs 浏览一本书。我的页面是双页的 jpg,我希望它们能够动态加载。

代码如下:

var flipbook = $('.flipbook');  
flipbook.turn({
elevation: 50,
gradients: true,
autoCenter: true,
pages: 118,
when: {
missing: function (e, pages) {
for (var i = 0; i < pages.length; i++) {
var n = pages[i];
if(!$(this).turn('hasPage',pages[i])) {
var pagenum = Math.floor(pages[i] / 2) + 1,
src="url(/pages/page_" + pagenum + ".jpg)",
element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
flipbook.turn('addPage',element,n);
}
}
}
}
});
<div class="flipbook">
<!-- Insert content dynamically -->
</div>

不幸的是,这并没有像我想要的那样工作,这就是发生的事情:

我上面发布的代码插入了页面,但每个双页都只是缩放到其宽度的 50%,然后放在一页上。例如,在第 4 页上,我有应该是第 4 页和第 5 页的内容,在左侧页面上,我有与其右侧邻居相同的内容。

我将最后一行更改为 flipbook.turn('addPage',element); 希望它会自动添加两页,但插入的第一页是 .p113 code> 而不是 .p1

我还将代码更改为

if(0 == n%2 && !$(this).turn('hasPage',pages[i])) {
var pagenum = Math.floor(pages[i] / 2) + 1,
src="url(/fileadmin/kollektion/2015/pages/page_" + pagenum + ".jpg)",
element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
element.scissor();
flipbook.turn('addPage',element,n);
}
}

但这导致只插入了左侧页面。

那么,使用 addPage 动态添加双页的最佳方法是什么?我在文档或示例中找不到任何相关信息。

最佳答案

因为我的页面图像被放置在 <div> 的背景中,技巧是添加一些样式来缩放背景图像并相应地定位它们:

.double{
background-size:200% 100%;
}

.double.even {
background-position: 0% 0%;
}

.double.odd {
background-position: 100% 0%;
}

关于javascript - 将双页添加到turnjs "book",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29388588/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com