使用单击/滚动事件模拟 Turn.js 页面翻转答案

【问题标题】：Simulating a Turn.js page flip with click/scroll event使用单击/滚动事件模拟 Turn.js 页面翻转
【发布时间】：2016-07-03 22:12:54
【问题描述】：

我创建了一个基本的 turn.js 翻书。当我单击链接元素 (#clickme) 时，我想模拟用户在剥离时单击 (mousedown) 并在翻页后释放 (mouseup) 的屏幕动画。到目前为止，这是我的代码：

$("#flipbook").turn({
    width: 700*2,
    height: 938,
    'display': 'double',
    duration: 3000
});

//Create two empty span elements over the peel start and end points
var rect = document.getElementById("flipbook").getBoundingClientRect();
$("#flipStart").css("top", rect.bottom - 50);
$("#flipStart").css("left", rect.right - 50);
$("#flipEnd").css("top", rect.bottom - 50);
$("#flipEnd").css("left", rect.left);

//Simulate the flip with click
$("#clickme").click(function() {
    var targetNode1 = document.getElementById("flipStart");
    var targetNode2 = document.getElementById("flipEnd");
    if (targetNode1) {
        triggerMouseEvent (targetNode1, "mouseover");
        triggerMouseEvent (targetNode1, "mousedown");
    }
    if (targetNode2) {
        triggerMouseEvent (targetNode2, "mouseover");
        triggerMouseEvent (targetNode2, "mouseup");
        triggerMouseEvent (targetNode2, "click");
    }
    else
        console.log ("*** Target node not found!");

    function triggerMouseEvent (node, eventType) {
        var clickEvent = document.createEvent ('MouseEvents');
        clickEvent.initEvent (eventType, true, true);
        node.dispatchEvent (clickEvent);
    }
});

当我运行它时，什么都没有发生。我认为mousedown 事件没有被触发，但mouseup 会触发。有人知道我做错了什么吗？

这是 HTML：

<body style="overflow: hidden">
<div id="clickme"><a href="#">Click</a></div>
<div id="flipbook" style="margin: auto; position: absolute">
  <div id="page1"><p>Page 1</p></div>
  <div id="page2"><p>Page 2</p></div>
  <div id="page3"><p>Page 3</p></div>
  <div id="page4"><p>Page 4</p></div>
  <div id="page5"><p>Page 5</p></div>
</div>
<div id="flipStart" style="position:absolute"><span style="display:block; width: 50px; height: 50px; margin: auto; z-index: 90;"></span> </div>
<div id="flipEnd" style="position: absolute"><span style="display: block; width: 50px; height: 50px; margin: auto; z-index: 90"></span> </div>
</body>

【问题讨论】：

能否也添加您的 HTML 代码？
当然。我添加了一个简化的 HTML。

标签： jquery turnjs

【解决方案1】：

关于您的代码的一些建议：

如果您已经在使用 jQuery，使用它来代替 Vanilla JS 更容易用于元素选择和触发事件。
最好将 CSS 样式保存在单独的文件中。尽量避免使用内联样式。

现在，关于您的问题，我不确定您要使用该代码做什么，但如果您“want to simulate a manual page flip when I click on a link element”您可能想看看next , previous 和 peel Turn.js 的方法。这是一个工作代码和一个JSFiddle，可以帮助您入门：

HTML

<div id="flipbook">
  <div class="hard"> Turn.js </div> 
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

<div id="controls">
  <a id="previous" href="#">Previous</a>
  <a id="next" href="#">Next</a>
</div>

$("#flipbook").turn({
    width: 400,
    height: 300
});

var num_pages = $("#flipbook").turn("pages");

$("#previous").mousedown(function(){
    var page = $("#flipbook").turn("page");
    if(page == 2 || page == 3 || page == num_pages){
        $("#flipbook").turn("peel", "l");
  }
  else{
        $("#flipbook").turn("peel", "tl");
  }
}).mouseup(function(){
    $("#flipbook").turn("previous");
});

$("#next").mousedown(function(){
    var page = $("#flipbook").turn("page");
    if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
        $("#flipbook").turn("peel", "r");
  }
  else{
        $("#flipbook").turn("peel", "tr");
  }
}).mouseup(function(){
    $("#flipbook").turn("next");
});

CSS

body{
    overflow:hidden;
    background-color:#D5E8EA;
}

#flipbook{
    width:400px;
    height:300px;
    margin: auto;
    position: absolute
}

#flipbook .page{
    width:400px;
    height:300px;
    background-color:#DED7D7;
    line-height:300px;
    font-size:20px;
    text-align:center;
}

#flipbook .hard{
   background:#ccc !important;
   font-weight:bold;
}

【讨论】：

感谢您的提醒 :)（我必须停止我对内联 CSS 的强迫习惯）。但是，您的代码不是我想要做的。我试图在屏幕上模拟用户翻页的整个动画。我希望最终让它适用于滚动。所以页面只会翻转到我滚动的范围内。
我想我现在明白了，我已经更新了答案和 JSFiddle。
感谢您的回答@Alvaro。我对您的代码的问题是它总是会完成翻页。如果我想在翻页之间暂停，如果我决定不想翻页怎么办？我将无法使用turn('next')。忘记我的点击。我的最终目的是在滚动上实现它。把我的问题想象成这样，对于每个滚动位置，页面都会转动一点。