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>

(0)

相关推荐

  • JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: 复制代码 代码如下: <head runat="server"> <title>无标题页</title> <%-- <script type="text/javascript"> function openDia() { var returned = window.showModalDialog("Default4.aspx?" + (new Date()), windo

  • javascript返回顶部效果(自写代码)

    现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

  • JavaScript常用的返回,自动跳转,刷新,关闭语句汇总

    本文实例讲述了JavaScript常用的返回,自动跳转,刷新,关闭语句.分享给大家供大家参考.具体如下: 1. Javascript 返回上一页: 复制代码 代码如下: history.go(-1) 返回两个页面: 复制代码 代码如下: history.go(-2) 2. 后退: 复制代码 代码如下: history.back() 3. 返回下一页: 复制代码 代码如下: window.history.forward() 4. 返回第几页,也可以使用访问过的URL: 复制代码 代码如下: win

  • javascript 返回数组中不重复的元素

    这是实现结构伪类type-of-type的部分代码: var ret= ["span","span","strong","span","b"] var norepeat = function(array){ var set = array.join(",")+","; while(array.length){ var el = array.shift(); set =

  • 用AJAX返回HTML片段中的JavaScript脚本

    这是AJAX开发中很常见的问题,如果你不是一直在用JavaScript框架做开发,相信你早就发现这个问题了.本文分析了两个解决办法,其中一个是讲解jQuery框架的实现. 一. 问题描述 下面举个简单的例子,演示问题所在.在下面的例子中,假设变量responseText就是AJAX加载的HTML片段数据,其中包含脚本弹出一条消息,用innerHTML方法插入ID为ajaxData的DIV中,你可能期望看到弹出那个消息框,结果你发现没有,问题就是这样. 复制代码 代码如下: <div id="

  • javaScript如何处理从java后台返回的list

    事情: 从java后台返回List<String>类型数据,用于界面显示.但js中想获取它并操作它.直接使用EL表达式,js把它识别成字符串了.不是我想要的啊..网上搜了搜大家的解决方案...最好的当然是把List集合转成json格式传到界面上.这样js里面操作也简单,页面也没有影响. 解决: 将List<String> 转成json,传到界面.js中使用var arr = eval('${list}');将list转成js数组. 我的代码: 复制代码 代码如下: var keyL

  • javascript 实现 原路返回

    css代码 复制代码 代码如下: <style type="text/css">         * {             margin: 0px;             padding: 0px;             font-family: "micsoft yahei","微软雅黑";             font-size: 15px;         }         div{             wi

  • vue根据进入的路由进行原路返回的方法

    情景: a---------->c 点击返回,希望返回到a b---------->c 点击返回,希望返回到b 解决方案: a页面,加from字段 PubSub.subscribe('table-view', function(msg, args) { var rowData = args[0], rowIndex = args[1]; //跳转详情页 this.$router.push({ name: 'viewAdvertiseDetails', query: { id: this.$ro

  • javascript跳转与返回和刷新页面的实例代码

    javascript中window.open()与window.location.href的区别 window.open('index.html') 表示新增一个窗口打开 index.html 这个页面,并不刷新 location.href('index.html') 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面 window.location 是 window 对象的属性,用来替换当前页,也就是重新定位当前页 而window.open 是 window 对象的方法,

  • JavaScript使用Math.Min返回两个数中较小数的方法

    本文实例讲述了JavaScript使用Math.Min返回两个数中较小数的方法.分享给大家供大家参考.具体如下: 下面JavaScript通过Math.Min返回两个数中较小的那个 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to return the lowest number of 5 and 10. </p> <button onclic

  • JavaScript使用Max函数返回两个数字中较大数的方法

    本文实例讲述了JavaScript使用Max函数返回两个数字中较大数的方法.分享给大家供大家参考.具体如下: JavaScript的Math对象带有一个max函数用于获取两个数字的较大数,下面的代码详细演示了max的用法 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to return the highest number of 5 and 10. </p&

  • 获取JavaScript异步函数的返回值

    今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值? 1.错误尝试 当年未入行时,我的最初尝试: <script> function getSomething() { var r = 0; setTimeout(function() { r = 2; }, 10); return r; } function compute() { var x = getSomething(); alert(x * 2); } compute(); </script> 2.回调函数

  • JavaScript中用getDate()方法返回指定日期的教程

    按照本地时间的javascript date.getDate()方法返回月份的一天,在指定日期.由getDate返回的值是1到31之间的整数. 语法 Date.getDate() 下面是参数的详细信息: NA 返回值: 返回今天的日期和时间 例子: <html> <head> <title>JavaScript getDate Method</title> </head> <body> <script type="te

  • android webview中使用Java调用JavaScript方法并获取返回值

    在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC

  • 在JavaScript中用getMinutes()方法返回指定的分时刻

    javascript Date.getMinutes()方法按照本地时间在指定日期返回分钟.通过getMinutes返回的值是0到59之间的一个整数. 语法 Date.getMinutes() 下面是参数的详细信息: NA 返回值: 在指定的日期,按照本地时间返回分钟. 例子: <html> <head> <title>JavaScript getMinutes Method</title> </head> <body> <sc

  • JavaScript中用toString()方法返回时间为字符串

    此方法返回表示指定日期对象的字符串. 语法 Date.toString() 下面是参数的详细信息: NA 返回值: 返回表示指定日期对象的字符串 例子: <html> <head> <title>JavaScript toString Method</title> </head> <body> <script type="text/javascript"> var dateobject = new Da

随机推荐