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. Android Fragment实现分屏

    在项目中碰到一个问题,新开发一个平板APP,项目要求是把原来的一个手机端APP放在项目左侧显示,右侧添加新加的功能. 首先想到了Fragment,以前做过Fragment的一些简单的Demo,但是都没 ...

  2. POJ --2104

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 34935   Accepted: 11134 Ca ...

  3. 用GPUImage开启相机并且开启滤镜效果

    GPUImage提供了GPUImageVideoCamera这么一个类,它的对象能够调用摄像头,并且加上滤镜的效果.     //init VideoCamera     //这里的两个参数可以设定拍 ...

  4. hdu 4411 arrest 最小费用流

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  5. Android RecyclerView使用(一)

    RecyclerView一种可以替换掉listview gridview 瀑布流等控件的新视图控件,控制视图回收和复用 ==优化内存可以替换listview 与listview的不同之处是:listv ...

  6. MySQL基础 (DML)

    DML语句             DML操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select) 1.插入记录 插入一条 ...

  7. hdu 2546 饭卡(DP)

    很久以前做过这道题,晚上睡不着,看见nyist加了一个DP的比赛,就进来打个酱油. 这道题的点睛之笔是将最大值记录下来,然后将其值改为0.之后就是普通的背包了. #include<stdio.h ...

  8. 在Sql Server 2005中将主子表关系的XML文档转换成主子表“Join”形式的表

    本文转载:http://www.cnblogs.com/Ricky81317/archive/2010/01/06/1640434.html 最近这段时间在Sql Server 2005下做了很多根据 ...

  9. TOJ1693(Silver Cow Party)

    Silver Cow Party   Time Limit(Common/Java):2000MS/20000MS     Memory Limit:65536KByte Total Submit: ...

  10. 使用navicat 11 出现不能返回存储过程结果的问题

    问题: 使用navicat 11 调试存储过程,select返回结果,总是不能返回. 原因: 经google发现,navicat仅支持返回10个resultset,超过则不现实. 解决方法: 减少存储 ...