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>

css代码

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>

javascript--”原路返回“的更多相关文章

  1. Rails多路径调用相同方法原路返回的方法

    有时候可能有多条path到达同一个method,此时,我们希望在该方法完成后自动转到之前进入的path中去,其实实现起来非常简单,只需要实现如下两个方法: def redirect_back_or(d ...

  2. javascript的typeof返回哪些数据类型

    javascript的typeof返回哪些数据类型 1.返回数据类型 undefined string boolean number symbol(ES6) Object Function 2.强制类 ...

  3. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  4. 理解JavaScript原型式继承

    0.基础 javascript没有类的概念, javascript不需要实例化某个具体类的实例.javascript对象本身可以用来创建对象, 而对象可以继承自其他对象, 这个概念称为原型式继承 每个 ...

  5. 一种Javascript解释ajax返回的json的好方法

    通常ajax请求返回的格式为json或者xml,如果返回的是json,则可以通过转换成javascript对象进行操作,如下: 1.ajax请求的controller实现 @RequestMappin ...

  6. JavaScript ----------------- 原型式继承

    思想:借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型.为了达到这个目的,看看下面的实现方式 function object(o){ function F(){ } F.protot ...

  7. javascript 缓动返回顶部案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 字符串(后缀数组):HAOI2016 找相同子串

    [HAOI2016]找相同子串 [题目描述] 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. [输入格式] 两行,两个字符 ...

  2. 数据结构(平衡树,树分治,暴力重构):WC 2014 紫荆花之恋

    [题目描述] 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来. 仔细看看的话,这棵大树实际上是一个带权 ...

  3. POJ1664

    Problem  B Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) Total Su ...

  4. poj 3575 Crosses and Crosses(SG函数)

    Crosses and Crosses Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 3063   Accepted: 11 ...

  5. 0ull 是什么意思?

    unsigned long long 类型的0 同理:#define     DEV_IIC1             ( (u64)1 <<  7ULL)    这个作用是64位中的第7 ...

  6. A*寻路算法的探寻与改良(二)

    A*寻路算法的探寻与改良(二) by:田宇轩                                                     第二部分:这部分内容主要是使用C语言编程实现A*, ...

  7. centos平台openstack spice配置

    配置过程只涉及控制节点(192.168.209.11)和计算节点(192.168.209.31),根据情况修改为实际环境的IP地址.     修改控制节点 安装软件包 yum install spic ...

  8. Java 集合框架 ArrayList 源码剖析

    总体介绍 ArrayList实现了List接口,是顺序容器,即元素存放的数据与放进去的顺序相同,允许放入null元素,底层通过数组实现.除该类未实现同步外,其余跟Vector大致相同.每个ArrayL ...

  9. Google邮箱:Gmail国际顶级邮箱

    本博文的主要内容有 .Google邮箱的介绍   1.Google邮箱的介绍 https://zh.wikipedia.org/wiki/Gmail http://mail/google.com/ h ...

  10. Myeclipse Professional 2014使用软件获取激活码的方法(声明:破解仅仅是为个人使用Myeclipse,不作为商业获利.商业活动请购买正版软件)

    一下说明全部为网络来源,已经忘了原地址了,一直保留的是获取激活码用的软件和说明, 原著看见可联系(非常谢谢原作者): 获取激活码用的软件下载地址(个人百度云):http://pan.baidu.com ...