javascript實現(xiàn)左右緩動動畫函數(shù)
更新時間：2020年11月25日 12:59:12 作者：persistsss
這篇文章主要為大家詳細介紹了javascript實現(xiàn)左右緩動動畫函數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)左右緩動動畫函數(shù)的封裝代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-4.4.1.css" >
<style>
.box{
width: 100px;
height: 100px;
background-color: chartreuse;
position:absolute;
}
</style>
</head>
<body>
<button class="btn1">移動400px</button>
<button class="btn2">移動800px</button>
<div class="box"></div>
<script>
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let box = document.querySelector('.box');
btn1.onclick = function(){
animate(box,400);
}
btn2.onclick = function(){
animate(box,800);
}
// 緩動動畫
function animate(element,target){
// 清除定時器
clearInterval(element.timeId);
element.timeId = setInterval(function(){
// 獲取元素當前的位置
let current = element.offsetLeft;
// 當current越大，step越小，先快后慢
let step = (target - current) / 10;
// 當step大于0時，step向上取整，否則，step向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + 'px';
// 不用擔心到達不了目標位置，因為step最小達到1
if(current == target){
clearInterval(element.timeId);
}
console.log("目標位置：" + target + "當前位置：" + current + "每次移動的步數(shù)：" + step);
},20);
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近在工作中遇到一個小問題，這篇文章代碼我會簡化成小例子展示給大家。給大家詳細的介紹JS數(shù)組中的indexOf方法，用心看到最后會有收獲哈，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要給大家介紹了關(guān)于利用ECharts.js畫K線圖的相關(guān)資料,，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
class是es6引入的最重要特性之一。在沒有class之前，我們只能通過原型鏈來模擬類。這篇文章我們將詳細的介紹關(guān)于ES6中CLASS的使用，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
在JavaScript中，有5種基本數(shù)據(jù)類型和1種復雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復雜數(shù)據(jù)類型是Object，Object中還細分了很多具體的類型，比如：Array, Function, Date等等2015-08-08
這篇文章主要介紹了JS遍歷DOM文檔樹的方法,結(jié)合實例形式分析了javascript遍歷dom文檔樹的相關(guān)方法與使用技巧,需要的朋友可以參考下2018-04-04
圖片連續(xù)不間斷滾動像冊...2007-01-01
Object instanceof Function 還是 Function instance of Object，是真是假，一一道來2010-01-01
JS中mouseover和mouseout多次觸發(fā)問題如何解決
這篇文章主要介紹了JS中mouseover和mouseout多次觸發(fā)問題如何解決的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細JavaScript中this指向的簡單理解，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript中sharedWorker 實現(xiàn)多頁面通信的實例詳解
這篇文章主要介紹了JavaScript中sharedWorker 實現(xiàn)多頁面通信,通過給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04