<div></div><!-- <span></span> --><button class="btn1">點擊500</button><button class="btn2">點擊800</button> div{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;margin-top: 100px;}/* span{display: block;width: 50px;height: 50px;background-color: gold;margin-top: 200px;position: absolute;top: 0;left: 0;} */ <script>// 創建簡單的動畫函數封裝效果(目標對象，目標位置)function animate(obj,target,callback){//callback回調函數相當于 ：callback = function(){},是零時添加的形參//清楚時間效果的同時，只留下一個時間效果clearInterval(obj.timer);obj.timer = setInterval(function(){//步長值寫道定時器里面(緩動動畫效果)// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;//當step大于0，就向上取值，要不向下取值，然后在賦值給stepstep = step > 0 ? Math.ceil(step) : Math.floor(step);//進行距離的判斷//如果當前的位置等于目標位置if(obj.offsetLeft == target){//清楚當前的時間效果clearInterval(obj.timer);//判斷有沒有這個回調函數if(callback){callback();}}//更改的位置等于 = 當前位置 + 每次移動的距離obj.style.left = obj.offsetLeft + step + 'px';},30)}var div = document.querySelector('div');var btn1 = document.querySelector('.btn1');var btn2 = document.querySelector('.btn2');btn1.onclick = function(){animate(div,500,function(){// alert('你好嗎？');div.style.backgroundColor = 'green';});}btn2.onclick = function(){animate(div,800);}// animate(span,300);</script>

實現效果：

總結

以上是生活随笔為你收集整理的简单的动画函数封装（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。