javascript 实现 原路返回
更新时间：2015年01月21日 09:55:07 投稿：hebedich
这篇文章主要介绍了javascript 实现原路返回的方法,需要的朋友可以参考下
css代码
复制代码 代码如下:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: "micsoft yahei","微软雅黑";
font-size: 15px;
}
div{
width: 50px;
height: 50px;
background: #f00;
border-radius:5px ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
position: absolute;
top: 60px;
left: 30px;
}
input{
position: absolute;
top: 10px;
left: 10px;
padding: 3px;
cursor: pointer;
}
</style>
html代码
复制代码 代码如下:
<body>
<input type="button" value="原路返回"/>
<div></div>
</body>
javascript代码
复制代码 代码如下:
<script type="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){
var event=ev || window.event;
//获取鼠标在div内的坐标
var disX=event.clientX-oDiv.offsetLeft;
var disY=event.clientY-oDiv.offsetTop;
arrTop=[60];
arrLeft=[30];
document.onmousemove=function(ev){
var event=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";
i++;
if(i==arrTop.length){
clearInterval(oBtn.time);
arrTop=[];
arrLeft=[];
}
},20);
}
}
</script>
相关文章
这篇文章主要介绍了js对象内部访问this修饰的成员函数示例,需要的朋友可以参考下2014-04-04
在一个函数体内，标识符arguments引用了arguments对象的一个特殊属性。可以按照数目（而不是名字）获取传递给函数的参数值。2010-10-10
getElementById().innerHTML与getElementById().value的区别
这篇文章主要介绍了getElementById().innerHTML与getElementById().value的区别,因为经常有新手朋友问到，特整理一下，需要的朋友可以参考下2016-10-10
javascript学习笔记之js一些基本概念，学习js的朋友可以参考下2012-06-06
大家在编写js代码的时候需要注意的一些地方，按照下面的方法，大家就可以尽量的让你的代码，更优化。2010-09-09
在了解了JavaScript1.7的相关更新后，我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScript系列特性文章中，JavaScript1.8的更新相对较少！2009-05-05
本文记录了几个平时在项目中使用javascript的易错的点，时刻提醒自己不要再犯相同的错误。2014-11-11
Document想必大家并不陌生吧，在使用js的过程中会经常遇到它，那么它有哪些属性、哪些方法，在本文将以示例为大家详细介绍下，希望对大家有所帮助2013-09-09
这篇文章介绍了JavaScript实现表单验证的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章介绍了TypeScript开发环境的安装方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最新评论