Question

我正在尝试用turn.js制作一本很棒的翻书。我唯一的问题是，我试图在移动中这样做它是单页显示和桌面双页显示。它可以选择在javascript中创建flipbook时选择 display：'single'或display：'double'

我设法改变了，当你调整窗口大小但是使用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');
         }
   });

我希望有人可以帮我解决这个问题

Answer 1

要使动画书对移动设备具有响应性，可以添加以下代码，该代码检查导航器的用户代理是否为移动设备。

function checkMobile() {
 return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}

然后在调整窗口函数的大小时使用它。

if (!checkMobile()) { // not mobile
 $('.flipbook').turn('display', 'double');
}
else {
 $('.flipbook').turn('display', 'single');
}

初始化活动簿后，可以使用上面的代码片段来动态设置活动簿的显示（双，单）。

Answer 2

再次向大家致意，我设法弄明白了......

我从这个

更改了最后一个代码部分

 $(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
  flipbook.turn('display','single');
}
});

到那个

 $(window).width(function(){
  var win = $(this); //this = window
  if (win.width() >= 820) { flipbook.turn('display','double');}
  else {
    flipbook.turn('display','single');
  }
});
$(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
  flipbook.turn('display','single');
}
});

在刷新页面和调整窗口大小时都可以正常工作。我不知道这是否是正确的方法，但似乎工作得很好

Answer 3

对于移动屏幕，您必须更改屏幕宽度这是经过测试的有效代码

if(window.innerWidth<768 && window.innerWidth >= 320) {
           $('#flipbook').turn({
            width:430,
            height:650,
            elevation:50,
            inclination:50,
            display: 'single',
            autocenter:true,
            acceleration: true,
            gradients:true,
            zoom:2,// you can change it as you desire
               duration:50,
          });
         }

Answer 4

以下是在移动屏幕上对我有用的内容：

    $('#flipbook').turn({
                        display: 'single',
                        acceleration: true,
                        gradients: true,
                        elevation:50,
                        when: {
                            turned: function(e, page) {
                                console.log('Current view: ', $(this).turn('view'));
                            }
                        }
                    });

turn.js根据窗口宽度显示选项

4 个答案: