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

Posted 2023-05-09

【中文标题】iFrame / Javascript鼠标加速中的Javascript iPhone滚动效果

【英文标题】：Javascript iPhone Scroll Effect in an iFrame / Javascript Mouse Acceleration

【发布时间】：2010-09-27 15:39:45

【问题描述】：

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

【问题讨论】：

在答案的帮助下，我或多或少地解决了这个问题：johnboxall.github.com/iphone.html

【参考方案1】：

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

iScroll Zynga Scroller Overscroll TouchScroll jScrollTouch

【讨论】：

太棒了。救生员 + AAA++ 重装

【参考方案2】：

点击此链接以获取有关您正在寻找的一种方法的完整说明。

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

摘录如下：

这个处理程序然后设置事件 捕获鼠标移动和存储 变量中的鼠标光标位置 鼠标 X 和鼠标 Y。然后它开始 计时器 monitorMouse() 测量 通过采样鼠标光标速度 这些变量中的值定期 间隔。变量 mouseLeft 和 mouseTop 持有每个采样鼠标 位置和采样率是 设置为 100 毫秒 变量 monitor.timerDelay。

还有一些作者的代码：

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);

【参考方案3】：

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