JavaScriptの実装 元のパスに戻る_基礎知識

CSSコード

コードをコピーします コードは次のとおりです:

HTML コード

コードをコピーします コードは次のとおりです:

JavaScript コード

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
//1. div 上でマウスをクリックして
をトリガーします。 //2. マウスをクリックして移動したときに、マウス移動イベントをトリガーします
//3. マウスを div から遠ざけて終了します
//4. [元の道路に戻る] ボタンをクリックして配列を横断し (座標を移動)、配列内の座標を定期的にトリガーして div を移動し、「戻る」関数を実行します
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var oBtn=document.getElementsByTagName("input")[0];
var time=null、arrTop=[]、arrLeft=[];
oDiv.onmousedown=function(ev){
varevent=ev || window.event;
// div 内のマウスの座標を取得します
var disX=event.clientX-oDiv.offsetLeft;
var disY=event.clientY-oDiv.offsetTop;
arrTop=[60];
arrLeft=[30];
document.onmousemove=function(ev){
varevent=ev || window.event;
//ドラッグ後のマウスの位置を取得
var l=event.clientX;
var t=event.clientY;
//ドラッグ後の位置を配列に保存します。ドラッグ後のマウスの位置からオブジェクト上のマウスの位置を引きます。これがドラッグ後のオブジェクトの位置です
arrLeft.push(l-disX);
arrTop.push(t-disY);
oDiv.style.left=l-disX "px";
oDiv.style.top=t-disY "px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
}
//元のパスに戻る核心は、移動中の座標を記録し、配列を再配置し、タイマーを設定して配列内の拡大値をオブジェクトに割り当てることです。
oBtn.onclick=function(){
arrTop.reverse();//並べ替え
arrLeft.reverse();//並べ替え
var i=0;
oBtn.time=setInterval(function(){
oDiv.style.top=arrTop[i] "px";
oDiv.style.left=arrLeft[i] "px";
私;
If(i==arrTop.length){
                                                                                                                                                                                      arrTop=[];
arrLeft=[];
} },20);
}
}