我正在尝试使用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 + '
' + '_now:' + MouseY._now + '
' + '_offset:' + MouseY._offset + '
' + '_timer:' + MouseY._timer + '
' ); MouseY.reset(); }, 10); });
现在的问题是将加速转换为屏幕移动 - 是否有任何算法(缓动?)或动画库可以帮助我解决这个问题?(我查看了JQuery的.animate(),但我不确定如何在拖动事件期间连续应用它!
更新 - 最终解决方案:
http://johnboxall.github.com/iphone.html
这是我在寻找动力学/动量滚动库时发现的:
iScroll
Zynga Scroller
反弹时
TouchScroll
jScrollTouch