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>

时间: 2015-01-19

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

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

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 弹出窗体点击按钮返回选择数据的实现

首先是父页面的代码: 复制代码 代码如下: <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> &

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

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

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 =

Javascript从数组中随机取出不同元素的两种方法

一.常规算法 第一种方法较常规,经测试有bug,数据量大以后随机几次返回的对象直接是function而不是object. 当然简单数据类型应该没有这个问题. 示例代码 /** 从数组中随机抽取数据 2016-09-09 **/ function getArrItem(arr, num) { var temp_array = new Array(); for (var index in arr) { temp_array.push(arr[index]); } var return_array =

JavaScript从数组中删除指定值元素的方法

本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个removeByValue的方法,调用非常简单 定义函数removeByValue进行元素删除 function removeByValue(arr, val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i,

JavaScript去掉数组中的重复元素

在写程序过程中,经常会遇到去除数组中重复元素的需求.要实现这个功能其实并不难. 我们可以用一个两重循环来实现,对于小的数组,这样做当然并无不妥. 但如果我们的数组比较大,里面的元素有上万个.那么用两重循环,效率是极为低下. 下面我们就用js的特性,编写一个高效去除数组重复元素的方法. 复制代码 代码如下: <script> function unique(data){ data = data || []; var a = {}; for (var i=0; i<data.length;

js在数组中删除重复的元素自保留一个(两种实现思路)

例如:var student = ['qiang','ming','tao','li','liang','you','qiang','tao']; 第一种思路是:遍历要删除的数组arr, 把元素分别放入另一个数组tmp中,在判断该元素在arr中不存在才允许放入tmp中 用到两个函数:for ...in 和 indexOf() <script type="text/javascript"> var student = ['qiang','ming','tao','li','l

用JS编写一个函数,返回数组中重复出现过的元素(实例)

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

JavaScript中去掉数组中的重复值的实现方法

复制代码 代码如下: 题目:要求写一个函数,去掉给定数组中的重复值. 如: 传入数组 a = [0, 8, 5, 4, 78, 8, 90, 4, 'a', 'b', 'a']; 要求返回:[0,4,5,8,78,90,a,b] 对于这个题目,在面试之后也想了好多次,不过一直没能想出一个时间复杂度较低的方法.昨天下午在宿舍看<JavaScript语言精粹>看到一个书中的一段代码有所触发,于是在jsfiddle上测试了,成功.代码如下(完整版参见jsfiddle) 复制代码 代码如下: var

java去除已排序数组中的重复元素

题目描述 给定一个已排序的数组,去除数组中的重复元素,只保留一个重复的元素,并且返回新的数组长度. 要求: 不要给数组分配额外的空间,你必须使用常量的内存大小进行原地操作. 例如: 给出数组A=[1,1,2],你的函数调用之后必须返回长度length=2,并且A现在变成[1,2]. 输入 一个已排序的数组,例如[1,1,2]. 输出 返回数组新的长度,例如length=2. 快慢指针法 设置fast指针遍历数组,slow指针指向不重复元素的下一位. public static int remov

删除PHP数组中的重复元素的实现代码

我们上一篇文章讲述了<如何删除PHP数组中头部,尾部,任意元素>,本文我们讲述通过 array_unique()函数删除数组中重复元素. array_unique()函数,将数组元素的值作为字符串排序,然后对每个值只保留第一个键名,忽略所有后面的键名,就是删除数组中重复的元素, 语法格式如下: array arry_unique(array array) 参数 array 为输入的数组. 下面实例使 array_unique()函数删除数组中重复的元素,具体示例代码如下: <?php h

javascript 删除数组中重复项(uniq)

可以直接使用的代码:我们修正版 function unique(data){ data = data || []; var a = {}; len = data.length; for (var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面是进阶教程与说明,喜欢跟深入的朋友可以参考下.首先让我们看下 YUI 是如何处理的: 复制代码 代码如下: var toObject = function(a) { var o = {}; for (var i = 0; i