JavaScript iPhone Scroll Effect en una aceleración de iFrame/Javascript Mouse

Question

Estoy tratando de recrear el evento de desplazamiento/desplazamiento de iPhone en una ventana usando JavaScript.

A partir de jQuery, estoy medir la aceleración del ratón y el desplazamiento durante el clic - arrastrar - eventos de liberación mediante un temporizador:

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

}); 

Ahora el problema es la traducción que la aceleración en el movimiento de la pantalla - ¿existen algoritmos (¿relajar?) o bibliotecas de animación que podrían ayudarme con esto? (He mirado en .animate de jQuery(), pero estoy seguro de cómo aplicarlo de forma continua durante los eventos de arrastre

Actualización - solución final aquí:

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

Answer 1

golpear hasta este enlace para la explicación completa de un enfoque que parece ser lo que está buscando

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

He aquí un extracto:.

Este controlador establece entonces evento de captura para el movimiento del ratón y almacena posiciones del cursor del ratón en las variables mouseX y mouseY. A continuación, inicia el temporizador monitorMouse() que mide la velocidad del cursor del mouse al muestrear los valores en estas variables a intervalos regulares de . Las variables mouseLeft y mouseTop retienen las posiciones de cada ratón de muestreos y la velocidad de muestreo es establecida en 100 milisegundos en la variable monitor.timerDelay.

Y algunos de código del autor:

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

Quizás se encuentre interesado en el plugin jQuery llamado Permitir desplazamiento: http://www.azoffdesign.com/overscroll (GitHub page)

Answer 3

Esto es lo que he encontrado en la búsqueda de cinética/momento librerías de desplazamiento:

• iScroll
• Zynga Scroller
• Overscroll
• TouchScroll
• jScrollTouch