iframe / javaScript 마우스 가속의 JavaScript iPhone 스크롤 효과
-
22-08-2019 - |
문제
JavaScript를 사용하여 창에서 iPhone Flick / Scroll 이벤트를 재현하려고합니다.
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://www.faqts.com/knowledge_base/vise/view.phtml/aid/14742/fid/53
여기에 발췌가 있습니다.
이 핸들러는 마우스 이동을위한 이벤트 캡처를 설정하고 변수 마우스 및 마우스에 마우스 커서 위치를 저장합니다. 그런 다음 정기적으로 이러한 변수의 값을 샘플링하여 마우스 커서 속도를 측정하는 타이머 MonitorMouse ()를 시작합니다. 변수 Mouseleft 및 MouseTop은 각 샘플링 마우스 위치를 유지하고 샘플링 속도는 가변 모니터에서 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);
}
다른 팁
동역학/모멘텀 스크롤 라이브러리를 찾을 때 찾은 내용은 다음과 같습니다.
Dackscroll이라는 JQuery 플러그인에 관심이있을 수 있습니다.http://www.azoffdesign.com/overscroll (Github 페이지)