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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
用javascript实现给图片加链接
Aug 15 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
解读! Python在人工智能中的作用
2017/11/14 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
小小的船教学反思
2014/02/21 职场文书
综合实践活动总结
2014/05/05 职场文书
社团活动总结格式
2014/08/29 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
企业承诺书格式范文
2015/04/28 职场文书
第二次离婚起诉书
2015/05/18 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
师范生见习自我总结
2015/06/23 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android