我正在尝试使用turn.js 制作一本翻页书,这非常棒。 我遇到的唯一问题是我试图使其在手机中为单页显示,在桌面上为双页显示。 在 JavaScript 中创建活页簿时,它确实可以选择 显示:'单'或显示:'双'
当您调整窗口大小时,我设法实现了更改,但使用了 onresize jwuery 事件,但这使得它仅在您调整窗口大小时才会触发,但如果不这样做,它总是双页......所以当浏览器呈现时移动设备的页面是默认的双页而不是单页
让我在这里发布我的代码 //创建活页簿
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
height: 600,
// Duration in millisecond
duration: 1000,
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 12,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
$('#slider').slider('value', getViewNumber($(this), page));
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
//change from single to double page
$(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
flipbook.turn('display','single');
}
});
我希望有人能帮我解决这个问题
最佳答案
要使翻页书响应移动设备,您可以添加以下代码,该代码检查导航器的用户代理是否是移动设备。
function checkMobile() {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}
然后在窗口函数的大小调整中使用它。
if (!checkMobile()) { // not mobile
$('.flipbook').turn('display', 'double');
}
else {
$('.flipbook').turn('display', 'single');
}
初始化动画书后,您可以使用上面的代码片段来动态设置动画书的显示(双屏、单屏)。
关于javascript - Turn.js 基于窗口宽度的显示选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43678160/