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);
}
}