The problems encountered:
Question
In the ①:mousemove event, a lot of left and top will be recorded in the Move method, and I just need a few sets of data to do it, and I don't need that much;
Question
②: Playback, in the For loop too fast, resulting in the effect is to see the beginning and end position directly, I want to slow down the middle of the process, a delay of the function, but there is no substantive solution.
Slowly drag the small square to a new location, then release the mouse,
Click "Reset" First, then click "Replay" to view the path
Only one Chance oh--| | |
part of the code that is deferred within a loop:
Copy Code code as follows:
Delay method
Sleep:function (n) {
var start = new Date (). GetTime ();
while (true)
if (new Date (). GetTime ()-Start > N)
Break
},
Look back at the track record
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;
Deferred Loop method
This.sleep (10);
}
}
Still did not achieve the effect of slow playback, to be resolved ...
Uh-huh, this morning I solved ~!.
Use the subscript of the array to constantly change the left and top of the small square without a for loop
Timer binding Array subscript
Copy Code code as follows:
//delay method
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; Inum the array subscript
OSlippage.style.top = this. Y[this.inum]-This.relativey;
mousetrackrecord.inum++;
//If the subscript is larger than his length, stop playback
if (This.inum > this. x.length-1) {
Clearinterval (This.timeid);
}
},
//Back track record
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;
////Delay Loop method
//This.sleep (10);
//}
This.timeid = SetInterval ("Mousetrackrecord.sleep ()", 10);
}
Demo Effect:
<script type= "Text/javascript" > Mousetrackrecord = {oslippage:null,//Small Squares X: [],//x coordinates Y: [],//y coordinates Clickx: 0,//mouse click on the x-coordinate clicky:0,//mouse clicks when the y-coordinate relativex:0,//mouse relative to the square of the x-coordinate relativey:0,//mouse relative to the square of the y-coordinate iscanmove:false,//Can move inum:0,//coordinate XY array subscript timeid:null,//playback timer//mouse down when mousedown:function () {//mouse clicks This.clickx = Event.clientx; This.clicky = Event.clienty; Get small squares var oslippage = document.getElementById ("slippage"); Get div Current coordinates (left and top boundary) var DivX = parseint (oSlippage.style.left) | | 0; var divy = parseint (oSlippage.style.top) | | 0; Gets the coordinates of the mouse relative div this.relativex = This.clickx-divx; This.relativey = This.clicky-divy; Setting can move This.iscanmove = true; Mousemove:function () {if (this.iscanmove) {var oslippage = document.getElementById ("slippage") when the mouse moves; OSlippage.style.left = Event.clientx-this.relativex; OSlippage.style.top = Event.clienty-this.relativey; Move to record the mouse trajectory Mousetrackrecord.startrecord (Event.clientx, EVENT.CLIEnty); },///When the mouse is released, Mouseup:function () {//cancels the MouseMove event var oslippage = document.getElementById ("slippage") of the small square; Oslippage.onmousemove = null; This.iscanmove = false; Stop recording clearinterval (This.timeid); ///Start recording the coordinates startrecord:function (x, y) of the mouse moved {this. X.push (x); This. Y.push (y); },//Click on the Stop button to return to the initial state overtrack:function () {var oslippage = document.getElementById ("slippage"); OSlippage.style.left = 50; OSlippage.style.top = 50; },//Delay method 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++; If the subscript is larger than his length, stop playback if (This.inum > this. x.length-1) {clearinterval (This.timeid); },//Back track record 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; Delayed circulation Method//This.sleep (10); } This.timeid = SetInterval ("Mousetrackrecord.sleep ()", 10); },//Initialize Init:function () {location.reload (); } </script> <div id= "map" > <div id= "slippage" onmouseup= "Mousetrackrecord.mouseup" (); "Onmousemove=" Mousetrackrecord.mousemove (); "onmousedown=" Mousetrackrecord.mousedown (); ></div></div><input id= "Button1" onclick= mousetrackrecord.overtrack (); "value=" Reset "type=" button "> <input id=" Button2 "onclick=" Mousetrackrecord.backtrack (); "value=" Playback "type=" button "> <input id=" Button3 "onclick=" Mousetrackrecord.init (); "Value=" One More Time type= "button" >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
