javascript 實(shí)現(xiàn) 原路返回

2019-11-20 13:20:46

字體：大中小

供稿：網(wǎng)友

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代碼

復(fù)制代碼代碼如下:

 <body>
 <input type="button" value="原路返回"/>
 <div></div>
 </body>

javascript代碼

復(fù)制代碼代碼如下:

<script type="text/javascript">
          //1、以鼠標(biāo)在div上點(diǎn)擊觸發(fā)為開(kāi)始
          //2、點(diǎn)擊鼠標(biāo)移動(dòng)時(shí)觸發(fā)鼠標(biāo)移動(dòng)事件 向數(shù)組內(nèi)注入數(shù)據(jù)（移動(dòng)的坐標(biāo)）
          //3、以鼠標(biāo)從div上移開(kāi)為結(jié)束
          //4、點(diǎn)擊“原路返回”按鈕遍歷數(shù)組（移動(dòng)的坐標(biāo)） 定時(shí)觸發(fā)數(shù)組內(nèi)的坐標(biāo)移動(dòng)div 達(dá)到”返回“的功能
            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;
                    //獲取鼠標(biāo)在div內(nèi)的坐標(biāo)
                    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;
                        //獲取拖拽后鼠標(biāo)的位置
                        var l=event.clientX;
                        var t=event.clientY;
                        //把拖拽后的位置存進(jìn)數(shù)組里面，用拖拽后鼠標(biāo)的位置減去鼠標(biāo)在物體上的位置，就是拖拽后物體的位置
                        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;
                }
                //原路返回的核心就是把移動(dòng)時(shí)的坐標(biāo)記錄下來(lái)，然后進(jìn)行數(shù)組重排，并設(shè)定定時(shí)器把數(shù)組內(nèi)的搞寬賦值給物體。
                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>