<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
top: 50px;
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>
<div>1</div>
<span>2</span>
<button>3</button>
<script>
//函数封装
function animate(obj, target) {
//obj.timer给对象添加属性避免使用var timer 需要不断开辟内存空间
//不同的实参有不同的定时器
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
//停止动画
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var button = document.querySelector('button');
//调用函数
animate(div, 300);
// animate(span, 200);
button.addEventListener('click', function() {
animate(span, 200);
})
</script>
</body>
</html>
动画函数及其封装
最新推荐文章于 2023-08-31 17:31:47 发布