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

2024-05-12

我正在尝试使用 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(使用前将#替换为@)

iFrame 中的 Javascript iPhone 滚动效果 / Javascript 鼠标加速 的相关文章

随机推荐