집 > 기사 > 웹 프론트엔드 > 마우스 궤적을 기록하고 back_javascript 기술을 재생하는 js 코드

마우스 궤적을 기록하고 back_javascript 기술을 재생하는 js 코드

WBOY원래의: 2016-05-16 18:29:251716검색

발생한 문제:
질문
①: mousemove 이벤트에서 많은 왼쪽과 위쪽이 이동 메서드에 기록됩니다. 단지 몇 세트의 데이터만 필요합니다.
질문
②: 재생 중에 for 루프의 실행이 너무 빨라서 시작 위치와 끝 위치가 직접 표시되었습니다. 중간 프로세스 속도를 늦추고 싶었지만 여전히 없습니다. 실질적인 솔루션.

작은 사각형을 새 위치로 천천히 드래그한 다음 마우스를 놓습니다.

먼저 "재설정"을 클릭한 다음 "재생"을 클릭하여 전달된 경로를 확인합니다.
한 번의 기회 - -|||
루프에서 지연된 코드 부분:

코드 복사 코드는 다음과 같습니다.

 
//Delay 메소드
sleep: function(n) { 
var start = new Date().getTime() 
while ( true) 
if (new Date().getTime() - start > n) 
break 
}, 
//기록 다시 보기
backTrack: function() { 
var oSlippage = document.getElementById("slippage"); 
var len = this.X.length; 
for (var i = 0; i < len; i ) { 
oSlippage .style.left = this. 🎜>} 
} 

 
느린 재생 효과는 아직 구현되지 않았으며 해결이 필요합니다. . . 
아하 오늘 아침에 해결됐어요~! 
for 루프가 필요하지 않습니다. 타이머를 사용하여 배열 첨자를 사용하여 작은 사각형의 왼쪽과 상단을 계속 변경합니다. 

배열 첨자와 결합된 타이머

코드 복사

코드는 다음과 같습니다. //지연 방법sleep: function(n) {

//var start = new Date().getTime()

//while (true) 
// if (new Date().getTime() - start > n) 
// break; 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = this.X[this.iNum] - this.relativeX는 배열 첨자입니다. 🎜>oSlippage.style.top = this.Y[this.iNum] - this.relativeY; 
MOUSETRACKRECORD.iNum ; 
//아래 첨자가 길이보다 길면 재생을 중지합니다
 .iNum > this.X .length - 1) { 
clearInterval(this.timeID) 
} 
}, 
//기록 되돌아보기
backTrack: function( ) { 
//var oSlippage = document.getElementById("slippage"); 
//var len = this.X.length 
//for (var i = 0; i < len; i ) { 
// oSlippage .style.left = this.X[i] - this.relativeX 
// oSlippage.style.top = this.Y[i] - this.relativeY; // //지연 루프 방법
// this.sleep(10); 
//} 
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10) 


데모 효과: 

]

성명：

이전 기사：$.ajax() 이벤트에서 반환된 값을 가져오고 jquery_jquery에 이벤트를 추가하는 방법다음 기사：$.ajax() 이벤트에서 반환된 값을 가져오고 jquery_jquery에 이벤트를 추가하는 방법

마우스 궤적을 기록하고 back_javascript 기술을 재생하는 js 코드

관련 기사