#square
我在 iOS 设备的视口中有一个垂直和水平居中
的蓝色……</p>
<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“触摸”事件和javascript“手势”事件之间的区别。我需要更多的事件监听器吗?喜欢gestureStart
并gestureEnd
为此工作吗?
我现在遇到的问题是,当我#square
非常快地将跳跃放大到最大值(300)时,我无法用手指准确控制它的大小。而且,一旦调整大小,我在做缩小手势时也很难再次减小大小。
我把我当前的代码放在 jsfiddle 上,这样你就可以自己测试了。http://jsfiddle.net/Ec3az/
也许有人可以在这里帮助我,因为我很想完成这篇文章。总体结果应该只是在智能手机上放大和缩小时提供非常流畅的体验和对正方形大小的实际控制。
先感谢您
编辑:顺便说一句。我只想使用标准的触摸事件,而不是使用额外的库。