javascript 实现 原路返回


Posted in Javascript onJanuary 21, 2015

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>
Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
使用zrender.js绘制体温单效果
Oct 31 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 #Javascript
浅谈javascript 函数内部属性
Jan 21 #Javascript
浅谈javascript 函数属性和方法
Jan 21 #Javascript
html的DOM中document对象images集合用法实例
Jan 21 #Javascript
浅谈javascript面向对象程序设计
Jan 21 #Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 #Javascript
封装好的一个万能检测表单的方法
Jan 21 #Javascript
You might like
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
幼儿园大班开学教师寄语
2014/04/03 职场文书
小学领导班子对照材料
2014/08/23 职场文书
教师节慰问信
2015/02/15 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
会议室管理制度范本
2015/08/06 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript