我正在尝试使用 JavaScript 在窗口中重新创建 iPhone 轻拂/滚动事件。
从 JQuery 开始,我使用计时器测量单击 - 拖动 - 释放事件期间鼠标的加速度和偏移量:
var MouseY = {
init: function(context) {
var self = this;
self._context = context || window
self._down = false;
self._now = 0;
self._last = 0;
self._offset = 0;
self._timer = 0;
self._acceleration = 0;
$(self._context).mousedown(function() {self._down = true;});
$(self._context).mouseup(function() {self._down = false;});
$(self._context).mousemove(function(e) {self.move(e);});
},
move: function(e) {
var self = this;
self._timer++;
self._last = self._now;
self._now = e.clientY + window.document.body.scrollTop;
self._offset = self._now - self._last;
self._acceleration = self._offset / self._timer;
},
reset: function() {
this._offset = 0;
this._acceleration = 0;
this._timer = 0;
}
};
$(function() {
MouseY.init();
setInterval(function() {
$('#info').html(
'_acceleration:' + MouseY._acceleration + '<br />' +
'_now:' + MouseY._now + '<br />' +
'_offset:' + MouseY._offset + '<br />' +
'_timer:' + MouseY._timer + '<br />'
);
MouseY.reset();
}, 10);
});
现在的问题是将加速度转化为屏幕移动 - 是否有任何算法(缓动?)或动画库可以帮助我解决这个问题? (我研究过 JQuery 的 .animate() 但我不确定如何在拖动事件期间连续应用它!
更新-最终解决方案在这里:
http://johnboxall.github.com/iphone.html http://johnboxall.github.com/iphone.html
以下是我在寻找动力学/动量滚动库时发现的内容:
- iScroll http://cubiq.org/iscroll
- Zynga 滚轴 https://github.com/zynga/scroller
- 过度滚动 http://www.azoffdesign.com/plugins/js/overscroll
- 触摸滚动 http://uxebu.com/blog/2010/09/15/touchscroll-0-2-first-alpha-available/
- jScrollTouch http://plugins.jquery.com/project/jScrollTouch
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)