javascript 实现原路返回

网络编程 2021-07-04 21:47www.168986.cn编程入门

这篇文章主要介绍了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;

            : 60px;

            left: 30px;

        }

        input{

            position: absolute;

            : 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.=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.=arrTop[i]+"px";

                        oDiv.style.left=arrLeft[i]+"px";

                        i++;

                        if(i==arrTop.length){

                            clearInterval(oBtn.time);

                            arrTop=[];

                            arrLeft=[];

                        }

                    },20);

                }

            }

    </script>

上一篇：javascript 获取浏览器版本下一篇：html的DOM中document对象forms集合用法实例

javascript 实现原路返回

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

javascript 实现 原路返回

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

javascript 实现原路返回