這篇文章主要介紹了關於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中文網！
相關推薦：
以上是js將任意元素移動到指定位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
