Hiệu ứng cuộn ảnh trên iPhone trong chế độ tăng tốc iFrame/Javascript

Question

Tôi đang cố gắng tạo lại sự kiện rung/cuộn của iPhone trong cửa sổ bằng JavaScript.

Bắt đầu với JQuery, tôi đo gia tốc của chuột và bù đắp trong nhấp chuột - kéo - sự kiện phát hành sử dụng một bộ đếm thời gian:

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

}); 

Bây giờ vấn đề là dịch mà tăng tốc vào phong trào màn hình - được có bất kỳ thuật toán (nới lỏng?) hoặc thư viện hoạt hình có thể giúp tôi về điều này? (Tôi đã nhìn vào .animate JQuery() nhưng tôi không chắc chắn làm thế nào để áp dụng nó liên tục trong các sự kiện kéo

Update - giải pháp cuối cùng ở đây:!

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

Answer 1

Hit lên liên kết này để giải thích đầy đủ của một cách tiếp cận có vẻ là những gì bạn đang tìm kiếm

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

Dưới đây là một đoạn trích:.

handler này sau đó thiết lập sự kiện chụp cho di chuyển chuột và các cửa hàng vị trí con trỏ chuột trong các biến mouseX và mouseY. Sau đó, nó sẽ bắt đầu màn hình hẹn giờ Mouse() đo tốc độ con trỏ chuột bằng cách lấy mẫu các giá trị trong các biến này theo các khoảng thời gian thường là . Các biến mouseLeft và chuộtTop giữ mỗi mẫu lấy mẫu chuột vị trí và tốc độ lấy mẫu là đặt thành 100 mili giây trong màn hình biến biến.timerDelay.

Và một số mã của tác giả:

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

Bạn có thể quan tâm plugin jQuery tên thanh cuộn: http://www.azoffdesign.com/overscroll (GitHub page)

Answer 3

Đây là những gì tôi thấy khi tìm kiếm động/đà thư viện cuộn:

• iScroll
• Zynga Scroller
• Overscroll
• TouchScroll
• jScrollTouch