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模拟器

    原文网址:http://blog.csdn.net/tiandinilv/article/details/8953001 1.Android模拟器介绍 Android中提供了一个模拟器来模拟ARM核的 ...

  2. Delphi中WideString类型如何转化成String类型

    var wstr:WideString; str:string; begin str:=WideCharToString(PWideChar(wstr)); end;

  3. HDOJ/HDU 2561 第二小整数(水题~排序~)

    Problem Description 求n个整数中倒数第二小的数. 每一个整数都独立看成一个数,比如,有三个数分别是1,1,3,那么,第二小的数就是1. Input 输入包含多组测试数据. 输入的第 ...

  4. leetcode https://oj.leetcode.com/problems/jump-game-ii/

    1.超时的,效率太低 public class Solution { public int jump(int[] A) { int len=A.length; int d[]=new int[len] ...

  5. Howto Setup yum repositories to update or install package from ISO CDROM Image

    Step # 1: Mount an ISO file Type the following command (replace iso file name with the actual iso fi ...

  6. HTTP协议的特点

    HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST.每种方法规定了客户与服务器联系的 ...

  7. c#基础语言编程-常用函数

    类型转换Convert Convert考虑数据意义的转换. Convert是一个加工.改造的过程.在使用Convert的转换过程中不会返回异常,当遇到类型转换的不知道的时候,用Convert找找. T ...

  8. 在Windows上安装私有GitHub的开源替代-GitLab

    在我之前的一篇博客中介绍过GitLab: 开源免费的git管理工具,今天说一下怎么在windows安装GitLab. BitNami可以很容易的帮助你安装开源应用,和Helicon Zoo类似,我之前 ...

  9. 单元测试时候使用[ClassInitialize]会该方法必须是静态的公共方法，不返回值并且应采用一个TestContext类型的参数报错的解决办法

    using Microsoft.VisualStudio.TestTools.UnitTesting; 如果该DLL应用的是 C:\Program Files\Microsoft Visual Stu ...

  10. Swing的设计是MVC的典范

    无论你的项目是否用到了Swing技术,我都要说,Swing是一个设计优秀的Java包,它充满了大师的智慧.假设你学了Java却连一个Button还不会写,就象你学习Visual Basic却不会用Bu ...