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 相关文章推荐
农历与西历对照
Sep 06 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
JS代码实现页面切换效果
Jan 10 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 数组遍历顺序理解
2009/09/09 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python3 字符串知识点学习笔记
2020/02/08 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
新三好学生主要事迹
2014/01/23 职场文书
公司门卫管理制度
2014/02/01 职场文书
安装工程师岗位职责
2015/02/13 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
JavaScript中isPrototypeOf函数
2021/11/07 Javascript