js將任意元素移動到指定位置-js教程-PHP中文網

js將任意元素移動到指定位置

不言

發布： 2018-07-09 17:17:41

原創

6522 人瀏覽過

這篇文章主要介紹了關於js將任意元素移動到指定位置，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

思路：將某元素移動到指定位置======需傳入2個參數。一個是要移動的元素element，另一個是指定的位置target。

取得元素的目前位置current，設定一個每次移動的距離step，設定計時器，透過多次循環移動，到達目標位置。根據目前位置和目標位置的距離判斷是否需要執行循環

以本文為例，這裡有幾個坑：

1、元素要移動，需要脫離文檔流，即css樣式中需要使用絕對定位

2、每觸發一次點擊，就產生一個定時器，當不停地點擊按鈕時，元素移動的速度不斷加快

===》解決：只設定一個定時器，且在執行定時器之前先清理一次定時器，防止上次的操作留下影響。

只設定一個計時器可以根據物件的屬性，物件點出來的屬性有且只有一個。即element.timer1=setInterval();

3、取得元素的目前位置，需要用offsetLeft / offsetTop / offsetWidth / offsetHeight,得到的結果是number類型，沒有px

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <style>
            div{
                width: 200px;
                height: 130px;
                background: red; 
                position: absolute;
                left: 20px;
                }
        </style>
    </head>
    
    <body>
        <input type="button" value="按钮1" id="btn"/>
        <input type="button" value="按钮2" id="btn2"/>
        <div id="dv">
            
        </div>
        <script>
            document.getElementById("btn").onclick=function(){
                animate(document.getElementById("dv"),400);
                
            };            
            document.getElementById("btn2").onclick=function(){
                animate(document.getElementById("dv"),1600);
            };
            //把任意元素移动到指定的目标位置
            function animate(element,target){
                clearInterval(element.timer1);
                element.timer1=setInterval(function(){//element是一个对象，对象点出来的属性有且只有一个，避免多次点击按钮产生多个定时器
                    var current=element.offsetLeft;    //获取当前位置，数字类型，没有px。
                    //不可以用element.style.left，因为该写法只能获取到行内样式，不能获取到<style></style>标签内的样式
                    var step=10;//每次移动的距离
                    step=current<target?step:-step;//step的正负表示了向左或是向右移动
                    current+=step;    //计算移动到的位置，数字类型，没有px                
                    if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离
                        element.style.left=current+"px";//移动
                    
                    }else{//当间距小于一步的距离，则清理定时器，把元素直接拿到目标位置
                        clearInterval(element.timer1);
                        element.style.left=target+"px";
                        
                    }
                },20);
            }
        </script>
    </body>    
</html>

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！