我创建了一个基本的转弯.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>
关于代码的一些建议:
- 如果你已经在使用jQuery,那么使用它而不是Vanilla JS来选择元素和触发事件会更容易。
- 如果您将 CSS 样式保存在单独的文件中会更好。尽量避免内联样式。
现在,关于你在问什么,我不确定你在用这段代码尝试什么,但如果你"want to simulate a manual page flip when I click on a link element
",你可能想看看 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>
.JS
$("#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;
}