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

StackOverflow https://stackoverflow.com/questions/379917

Question

Je suis en train de recréer l'événement film / défilement iPhone dans une fenêtre en utilisant JavaScript.

A partir de JQuery, je mesure l'accélération de la souris et du décalage en un clic - glisser - événements à l'aide d'une minuterie libération: 

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 l'accélération traduit en un mouvement de l'écran - sont-il des algorithmes (assouplissement?) Ou les bibliothèques d'animation qui pourraient me aider à ce sujet? (Je l'ai regardé dans le .animate de JQuery () mais je ne suis pas sûr de la façon de l'appliquer de façon continue pendant les événements de déplacement!

Mise à jour - solution finale ici:

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

Était-ce utile?

La solution

Hit 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 alors l'événement   capturer pour le mouvement de la souris et magasins   souris positions du curseur dans les variables   mouseX et mouseY. Il commence alors la   monitorMouse minuterie () qui mesure   souris vitesse du curseur par échantillonnage du   les valeurs de ces variables à intervalles réguliers   intervalles. Les variables mouseLeft   et mouseTop tenir chaque souris des échantillons   positions et le taux d'échantillonnage est   réglé à 100 millisecondes dans le   monitor.timerDelay variable.

Et certains du code de l'auteur: 

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

Autres conseils

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

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top