iFrame / Javascript鼠标加速中的Javascript iPhone滚动效果

我正在尝试使用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

Answer 1

点击此链接可获得一个似乎正在寻找的方法的完整解释。

http://www.faqts.com/knowledge_base/view.phtml/aid/14742/fid/53

这是一段摘录：

然后，此处理程序设置鼠标移动的事件捕获，并将鼠标光标位置存储在变量mouseX和mouseY中。 然后它启动定时器monitorMouse（），它通过定期对这些变量中的值进行采样来测量鼠标光标速度。 变量mouseLeft和mouseTop保存每个采样鼠标位置，并且变量monitor.timerDelay中的采样率设置为100毫秒。

还有一些作者的代码：

 nn4 = (document.layers)? true:false; mouseLeft = mouseTop = mouseX = mouseY = 0; monitor = { timerDelay:100, moveLimit:2, sampleLimit:10 }; function startMonitor(thisText) { if (!tip) return; toolTipText = thisText; writeTooltip(toolTipText); document.captureEvents(Event.MOUSEMOVE); document.onmousemove = function (evt) { mouseX = evt.pageX; mouseY = evt.pageY; return true; } monitorMouse(); } function stopMonitor() { if (!tip) return; hideTooltip(); if (monitor.timer) { clearTimeout(monitor.timer); monitor.timer = null; } document.releaseEvents(Event.MOUSEMOVE); document.onmousemove = null; monitor.slowSamples = 0; } function monitorMouse() { if (Math.abs(mouseX - mouseLeft) > monitor.moveLimit || Math.abs(mouseY - mouseTop) > monitor.moveLimit) { monitor.slowSamples = 0; } else if (++monitor.slowSamples > monitor.sampleLimit) { showTooltip(); return; } mouseLeft = mouseX; mouseTop = mouseY; monitor.timer = setTimeout("monitorMouse()",monitor.timerDelay); } 

Answer 2

这是我在寻找动力学/动量滚动库时发现的：

• iScroll
• Zynga Scroller
• 反弹时
• TouchScroll
• jScrollTouch

Answer 3

您可能对名为overscroll的jQuery插件感兴趣： http ：//www.azoffdesign.com/overscroll（ GitHub page ）