Javascript实现原始路径返回

Javascript实现原始路径返回
CSS代码

复制代码代码如下所示:
{ *

保证金:0px;

填料:0px;

微软雅黑字体

字体大小:15px;

}

div {

宽度:50px;

身高:50px;

背景:# F00;

边界半径:5px;

-moz边界半径:5px;

WebKit的边界半径:5px;

光标:指针;

位置:绝对;

上图:60px;

左:30px;

}

输入{

位置:绝对;

上图:10px;

左:10px;

填料:3px;

光标:指针;

}
HTML代码

复制代码代码如下所示:
Javascript代码

复制代码代码如下所示:
1,单击鼠标并单击div作为开始。

2,单击鼠标移动以触发鼠标移动以向数组中注入数据(移动坐标)

3,从div到结束的鼠标的结束

4,单击原始的返回按钮,遍历数组(移动的坐标)来触发数组中的坐标移动div以实现返回函数

窗口。指针函数(){

无功odiv = document.getelementsbytagname(div){ 0 };

VaR的OBTN = document.getelementsbytagname(输入){ 0 };

VAR时间= null,arrtop = { },arrleft = { };

ODiv。onmousedown =功能(EV){

风险事件= EV window.event | |;

在div中获取鼠标坐标

VaR disx = event.clientx-odiv.offsetleft;

VaR Disy = event.clienty-odiv.offsettop;

arrtop = { 60 };

arrleft = { 30 };

文件。移动鼠标=功能(EV){

风险事件= EV window.event | |;

鼠标在获取位置后拖动。

var = event.clientx;

var t = event.clienty;

拖放位置后存入数组,用鼠标位置减去鼠标拖动物体后的位置,拖动物体的位置是

ArrLeft.push(l-disx);

ArrTop.push(t-disy);

ODiv。风格。左= l-disx +PX;

ODiv。风格。最高t-disy +PX;

};

文件。onmouseup =函数(){

移动鼠标=空文件;

文件。onmouseup = null;

};

返回false;

}

核心回溯是移动记录的坐标,然后设置定时器,数组内的数组重排被分配给对象的宽度。

OBtn。onclick =函数(){

(arrtop。反向); / /重排

(arrleft。反向); / /重排

var I=0;

OBTN。时间= setInterval(){()函数(

ODiv。风格。最高arrtop {我} +PX;

ODiv。风格。左= arrleft {我} +PX;

++;

如果(我= = arrtop。长度){

ClearInterval (oBtn.time);

arrtop = { };

arrleft = { };

}

},20);

}

}
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部