Effet Scroll de l'iPhone Javascript dans une accélération iFrame / Javascript de la souris

J'essaie de recréer l'iPhone flick /événement scroll dans une fenêtre à l'aide de JavaScript.

De départ avec JQuery, je suis en mesure de la souris de l'accélération et du décalage en cliquer - glisser la libération des événements à l'aide d'une minuterie:

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

});

Maintenant, le problème est que la traduction de l'accélération, en mouvements à l'écran - il des algorithmes (assouplissement?) ou l'animation des bibliothèques qui pourrait m'aider sur ce point? (J'ai regardé dans JQuery .animate (), mais je ne suis pas sûr de la façon de l'appliquer en permanence pendant les événements de glisser!

Mise à jour de finale de la solution ici:

http://johnboxall.github.com/iphone.html

source d'informationauteur jb. | 2008-12-19

  1. 4

    Frapper jusqu'à ce lien pour l'explication complète d'une approche qui semble être ce que vous cherchez.

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

    Voici un extrait:

    Ce gestionnaire établit ensuite événement
    la capture de mouvement de la souris et magasins
    curseur de la souris postes dans des variables
    mouseX et mouseY. Il commence alors l'
    minuterie monitorMouse() qui mesure
    curseur de la souris par la vitesse d'échantillonnage de la
    les valeurs de ces variables lors de l'ordinaire
    les intervalles. Les variables mouseLeft
    et mouseTop chacun des échantillonnages de la souris
    postes et le taux d'échantillonnage est
    set de 100 millisecondes dans le
    variable moniteur.timerDelay.

    Et certains de l'auteur du code:

    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);
}
  2. 9

    Voici ce que j'ai trouvé lors de la recherche de cinétique/défilement dynamique des bibliothèques:

  3. 2

    Vous pourriez être intéressé par le plugin jQuery nommé overscroll:
    http://www.azoffdesign.com/overscroll (Page GitHub)