释放双眼，带上耳机，听听看~！
<!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>
* {
margin: 0px;
padding: 0px;
}
.one {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
top: 50px;
}
.two {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0px;
top: 170px
}
</style>
</head>
<body>
<button id="btn400">点我移动到400</button>
<button id="btn800">点我移动到800</button>
<div class="one" id="box1"></div>
<script>
//需求:点击按钮让盒子缓动动画到400
//1.获取元素
let btn400 = document.getElementById('btn400');
let btn800 = document.getElementById('btn800');
let box1 = document.getElementById('box1');
// //声明一个变量记录计时器id
// let timerId = null;
//2.给btn400按钮设置点击事件
btn400.onclick = function () {
animateSlow(box1, {
left:400,
top:100,
width:200,
height:200
});
}
//4.给btn800按钮设置点击事件
btn800.onclick = function () {
animateSlow(box1, {
left:800,
top:200,
width:300,
height:300
});
}
//---------------------------------------------------
//缓动动画做一个函数封装.
//01-动画最终到达的目标位置不要写死
//02-做动画的元素不要写死
//03-方向不写死
//04-做动画的样式不写死
//05-做动画的样式是多个不是一个.
function animateSlow(ele, obj) {
//设置新计时器之前清空老的计时器
clearInterval(ele.timerId);
//设置计时器
ele.timerId = setInterval(function () {
//假设 当前移动的这一次 所有的属性都到达了目的地.
let flag = true;
//遍历obj这个对象,拿到每一个要做动画的样式,来让他到达目标位置
for (let key in obj) {
//获取元素传进来的样式的当前的值
let currentValue = parseInt(getStyle(ele, key));
//设置步长
let step = (obj[key] - currentValue) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//计算
currentValue += step;
//判断
if(currentValue != obj[key]){
//假设失败
flag = false;
}
//赋值.
ele.style[key] = currentValue + 'px';
console.log(key,step,currentValue);
}
//到了这里flag的值还是true,说明假设成功.说明所有的属性都已经到了目的地
//就应该清空计时器
if(flag == true){
clearInterval(ele.timerId);
}
}, 50);
}
//封装一个兼容函数--------
function getStyle(ele, attr) {
//能力检测
if (window.getComputedStyle != undefined) {
//支持
return window.getComputedStyle(ele, null)[attr]
} else {
//不支持
return ele.currentStyle[attr]
}
}
</script>
</body>
</html>
内容投诉
