2008-12-19 10 views
12

मैं जावास्क्रिप्ट का उपयोग कर एक विंडो में आईफोन फ्लिक/स्क्रॉल इवेंट को फिर से बनाने की कोशिश कर रहा हूं।एक आईफ्रेम/जावास्क्रिप्ट माउस त्वरण में जावास्क्रिप्ट आईफोन स्क्रॉल प्रभाव

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

+0

इस एक: http://johnboxall.github.com/iphone .html –

उत्तर

4

अप मारो ऐसा लगता है कि एक दृष्टिकोण की पूरी जानकारी के लिए इस लिंक पर आप जो खोज रहे हैं होने के लिए

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

यहाँ एक अंश है:।

यह हैंडलर फिर घटना कब्जा माउस आंदोलन और दुकानों चर में माउस कर्सर पदों mouseX और कातर के लिए सेट करता है। इसके बाद यह टाइमर मॉनिटरमाउस() शुरू करता है जो नियमित रूप से अंतराल पर इन चरों में मानों का नमूना करके माउस कर्सर गति को मापता है। वेरिएबल्स माउस लिफ्ट और माउस टॉप प्रत्येक नमूने माउस पदों को पकड़ें और नमूना दर परिवर्तनीय मॉनिटर.timerDelay में 100 मिलीसेकंड पर सेट है।

और लेखक का कोड के कुछ:

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

यहाँ मैं क्या मिला जब गतिज/गति के लिए देख रहा है स्क्रॉलिंग लाइब्रेरीज़:

जवाब मैं और अधिक या कम समाधान कर लिया है की मदद से
+1

अद्भुत। जीवन बचतकर्ता + एएए ++ repped – TheBlackBenzKid

संबंधित मुद्दे