js melaksanakan analisis trajektori seret dan lepas main balik daripada kemahiran process_javascript

Saya agak gembira hari ini Blog csdn mempunyai lebih 10,000 tontonan Saya tidak pernah mempunyai jumlah tontonan yang tinggi pada masa lalu. Saya perlu mengatakan bahawa ia masih terlalu kerap. Tidak membantu tetapi gembira melihat galakan ini Ah, sekurang-kurangnya, ini memberi saya perasaan menjadi orang dalam, dan saya tidak bersendirian.

Tanpa berlengah lagi, mari kita teruskan rakaman hari ini, rakam jejak seret main balik, dan analisa prosesnya dahulu:

1. Untuk memainkan semula jejak seret, anda mesti merakam dahulu;

2. Untuk merakam jejak seretan, seretan mesti dilaksanakan

Masalah ini telah diselesaikan beberapa hari yang lalu, dan pelaksanaannya sedikit cacat, tetapi kaedah pelaksanaan umum sudah jelas, jadi hari ini kelajuan melaksanakan masalah ini lebih cepat, dan saya sangat gembira melaksanakannya semula hari ini, pemahaman saya lebih mendalam, jadi saya akan merekodkannya semula hari ini;

Untuk merakam jejak seretan, analisis ini akan menjadi pendek cerita, Lagipun, ia telah dilakukan sekali:

1. Tentukan kedudukan dan status div semasa untuk memastikan penyeretan mutlak

2. Pantau peristiwa seret tetikus (beberapa peristiwa tetikus diringkaskan semalam);

3. Buat respons yang sepadan mengikut peristiwa tetikus yang sepadan, dan rekod titik sedia ada div semasa penyeretan onmousemove

4 Pantau acara lantunan tetikus untuk menamatkan rakaman acara seret dan mata

Mari kita laksanakan kod dahulu (semua kod disenaraikan di sini pada masa yang sama dan dianalisis satu persatu kemudian):

bahasa html:

bahagian javascript:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//这个还是那么熟悉啊 
<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//这个是来回放的

Ringkasan ringkas perkara utama yang memerlukan perhatian:

window.onload=function(){ 
var obj=document.getElementById("showZone"); 
var disX=disY=0; 
var dragIf=false; 
var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//这个是实现记录和回放的关键，其它都是基本元素的获取 
var oa=document.getElementsByTagName("a")[0]; 

obj.onmousedown=function(event){ 
var event=event||window.event; 
disX=event.clientX-obj.offsetLeft;//鼠标相对于div边框的距离 
disY=event.clientY-obj.offsetTop; 
dragIf=true;//可以进行拖拽的标志 

position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就开始了 
return false; 
}; 
document.onmousemove=function(event){ 

if(!dragIf)return;//这个判断极为重要，只有按下的移动才有效 
var event=event||window.event; 
var nowX=event.clientX-disX;//根据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧 
var nowY=event.clientY-disY; 
var maxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth，是div的宽度，不是offsetLeft 
var maxY=document.documentElement.clientHeight-obj.offsetHeight; 
nowX=nowX<0&#63;0:nowX;//这些判定，只是判断不要出了边界 
nowY=nowY<0&#63;0:nowY; 
nowX=nowX>maxX&#63;maxX:nowX; 
nowY=nowY>maxY&#63;maxY:nowY; 

obj.style.marginTop=obj.style.marginLeft=0; 
obj.style.left=nowX+"px";//不要忘记+“px”，只有style.left/top是有“px”的 
obj.style.top=nowY+"px"; 
position.push({x:nowX,y:nowY});//不停记录啊 
obj.innerHTML="X:"+nowX+"Y:"+nowY;//直观的看到变化 
return false; 
}; 
document.onmouseup=function(){ 
dragIf=false;//不允许再进行拖拽和记录了 
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; 
}; 
oa.onclick = function (){ 
if (position.length == 1) return;//只有一个的时候，说明并未移动 
var timer = setInterval(function (){ 
var oPos = position.pop(); 
oPos &#63; (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被这个写法惊艳到 
}, 30); 
return false; 
}; 
};

1. Tatasusunan kedudukan Var, koleksi mata: Titik ini ialah titik bergerak di sudut kiri atas div Maksudnya, trek pergerakan yang kami rakam sebenarnya adalah koleksi mata di sudut kiri atas daripada div. OffsetLeft ialah koordinat x offsetTop ialah koordinat y Adakah anda tahu cara melukis paksi koordinat ini

2. Beberapa panjang atau jarak yang muncul dalam program: offsetLeft, clientX, offsetWidth, style.left, document.documentElement.clientWidth, dsb.;

3. kaedah push(): tambah elemen pada hujung tatasusunan, tukar panjang tatasusunan, hujungnya;

4. Kaedah Pop(): padam dan kembalikan elemen terakhir tatasusunan Satu: kembalikan elemen terakhir dan panjang tatasusunan menjadi lebih kecil

Dengan cara ini, kita telah melaksanakan main semula ke belakang Tidak perlu dikatakan prinsip pelaksanaan Jika kita bermain semula ke hadapan, adakah kita perlu mendapatkan dan memadam nilai pertama Bar.

Saya harus mengatakan bahawa ia masih lebih selesa untuk menyeret dengan tetikus Terlalu menyusahkan untuk menggerakkan papan kekunci Anda boleh menyeret tanpa sekatan dengan tetikus... Cuaca telah ditetapkan dan panas, tetapi hari ini tidak teruk...