Using Zoom by Jackmoore: http://www.jacklmoore.com/zoom/https://github.com/jackmoore/zoom
我想在触摸设备上双击来切换缩放效果。原因是我使用的carousel (OWL carousel)图像也有滑动功能,Zoom通过触摸和拖动图像在触摸设备上工作,这与滑动相冲突。
就像topman网站为移动设备做的那样:http://www.topman.com/en/tmuk/product/clothing - 140502/mens开拓者5369753/black -变形- slim适合礼服夹克- 5390835 ?bi=0& ps = 20
这是JS文件的链接:https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js我可以让这个工作在非触摸设备上双击:
if (settings.on === 'toggle') {
$source.on('dblclick.zoom',
function (e) {
if (clicked) {
stop();
} else {
start(e);
}
clicked = !clicked;
}
);
但是需要适应触摸设置的代码,我相信改变这部分:
// Touch fallback
if (settings.touch) {
$source
.on('touchstart.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
} else {
touched = true;
start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
}
})
.on('touchmove.zoom', function (e) {
e.preventDefault();
zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
})
.on('touchend.zoom', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
}
});
}
也许添加一个像Touchy: https://github.com/yairEO/touchy这样的双击监听器可以做到这一点。我现在已经成功地让它识别了双击,但不能启动缩放功能。
您可以自己创建双击处理程序。你需要一些东西来跟踪点击发生的速度。
在触摸端,您需要存储时间戳,并了解经过了多少时间,如果您想将其视为双击。
var stateVar = new Date().getTime();
function fnRef(e){
if(new Date().getTime() - stateVar < 300){
e.preventDefault();
// invoke logic here
}
}
element.addEventListener("touchend", fnRef);
上面的代码应该适应你的编码风格和情况,但一般来说,这是它背后的逻辑。
我使用300ms作为比较值的原因是因为您需要防止点击行为并在那时调用缩放。300ms是tap事件调用click的时间(在支持触摸的环境中浏览器的通常行为)