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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
常用简易JavaScript函数
Apr 09 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 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的拦截器实例分析
2014/11/03 PHP
PHP获取文件行数的方法
2015/06/10 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
js获取变量
2006/08/24 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python实现购物程序思路及代码
2017/07/24 Python
分析python切片原理和方法
2017/12/19 Python
用Python逐行分析文件方法
2019/01/28 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
数据库专业英语
2012/11/30 面试题
百度吧主申请感言
2014/01/12 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
三项教育活动实施方案
2014/03/30 职场文书
党务公开方案
2014/05/06 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
教师工作能力自我评价
2015/03/04 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
企业安全生产检查制度
2015/08/06 职场文书