我的iOS设备上的视口中有一个蓝色#square
垂直和水平居中......
<div id="square"></div>
#square {
width:100px;
height:100px;
background:blue;
margin:0 auto;
}
我想在手机上进行捏合/缩放手势时,在最小值和最大值范围内调整大小。
现在,这是我正在使用的所有javascript。
$(document).ready(function() {
var dom = document.body,
_width = parseInt($('#square').css('width')),
vel = 3,
min = _width,
max = 300,
scale;
dom.addEventListener("gesturechange", gestureChange, false);
function gestureChange(e) {
e.preventDefault();
scale = e.scale;
_width = Math.round(_width*(scale/vel));
if ( _width <= max && _width >= min )
$('#square').css({
'width' : _width + 'px',
'height' : _width + 'px'
});
if ( _width > max ) _width = max;
if ( _width < min ) _width = min;
}
});
然而,整个戒烟体验感觉有些不稳定,并且不能顺利地回应我的手指。它确实有效,但并不像我希望的那样顺利。
首先关闭。我真的没有区分javascript“touch”-event和javascript“gesture”-event。我在这里需要更多的eventListeners吗?像gestureStart
和gestureEnd
这样可以使用吗?
我现在遇到的问题是,当我将#square
跳跃到最大值(300)的速度非常快时,我无法用手指完全控制它的大小。一旦调整大小,我在制作缩小手势时也会再次减小尺寸。
我将当前代码放在jsfiddle上,以便您可以自己测试它。 http://jsfiddle.net/Ec3az/
也许有人可以帮助我,因为我很想完成这件作品。总体结果应该是一个非常流畅的体验,并且在放大和缩小智能手机时实际控制正方形的大小。
提前谢谢
编辑:顺便说一句。我喜欢只使用标准触摸事件而不使用额外的库。
答案 0 :(得分:7)
您遇到的问题是,当您获得新的手势更改事件时,您正在缩放广场的当前宽度,而实际上您想要缩放广场的原始宽度和高度。按照自己的方式进行累积可以累积每个尺度的变化,并且可以快速增加正方形的尺寸,这正是您所经历的。
缩放完成后,我们还需要将原始宽度更新为当前宽度,因此下次用户缩放时,它将从正确的大小缩放。
因此,这会创建更流畅的体验,因为它始终缩放原始宽度:
var dom = document.body,
_width = parseInt($('#square').css('width')),
vel = 5.0,
min = _width,
max = 300,
scale;
dom.addEventListener("gesturechange", gestureChange, false);
dom.addEventListener("gestureend", gestureEnd, false);
function gestureChange(e) {
e.preventDefault();
scale = e.scale;
var tempWidth = _width * scale;
if (tempWidth > max) tempWidth = max;
if (tempWidth < min) tempWidth = min;
$('#square').css({
'width': tempWidth + 'px',
'height': tempWidth + 'px'
});
}
function gestureEnd(e) {
e.preventDefault();
_width = parseInt($('#square').css('width'));
}
这款小提琴似乎在iPad 1,iOS 5.1上很流畅! :)
另外,关于手势和触摸事件,我在许多浏览器中支持触摸事件(android,iOS safari和Firefox似乎http://caniuse.com/#search=touch),但据我所知,手势事件是iOS safari专有的。它们基本上可以帮助您处理iOS类型的手势(捏合和缩放,旋转等),因此您不必自己实施手势检查。
希望它有所帮助!