<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">點擊夏雨荷到500</button>
<button class="btn800">點擊夏雨荷到800</button>
<span>夏雨荷</span>
<script>
// 緩動影片函式封裝obj目標物件 target 目標位置
// 思路：
// 1. 讓盒子每次移動的距離慢慢變小， 速度就會慢慢落下來。
// 2. 核心演算法：(目標值 - 現在的位置) / 10 做為每次移動的距離 步長
// 3. 停止的條件是： 讓當前盒子位置等于目標位置就停止定時器
function animate(obj, target) {
// 先清除以前的定時器，只保留當前的一個定時器執行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步長值寫到定時器的里面
// 把我們步長值改為整數 不要出現小數的問題
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止影片 本質是停止定時器
clearInterval(obj.timer);
}
// 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
// 呼叫函式
animate(span, 500);
})
btn800.addEventListener('click', function() {
// 呼叫函式
animate(span, 800);
})
// 勻速影片 就是 盒子是當前的位置 + 固定的值 10
// 緩動影片就是 盒子當前的位置 + 變化的值(目標值 - 現在的位置) / 10）
</script>
</body>
</html>
uj5u.com熱心網友回復：
當我把obj.timer改成中間沒有點的隨便一個英文又要宣告才可以運行成功 ，但是第一個清除定時器好像就沒有效果了(如果同時點btn500，btn800會出現盒子往兩邊跑的情況，就跑不動了)轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/237837.html
標籤：JavaScript
上一篇：IntelliJ IDEA 2020.3 新特性——Show me the code系列
下一篇：ASP連接access資料庫時出現ADODB.Connection 錯誤 '800a0e7a' 未找到提供程式。該程式可能未正確安裝。