封装简单动画函数

68 阅读 0 评论 45 点赞

我是靠谱客的博主敏感菠萝，最近开发中收集的这篇文章主要介绍封装简单动画函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

/*

1.首先在写元素样式时一定要给元素添加位置
2.获取元素位置，offsetLeft
2.通过setInterval定时器完成动态效果
3.加一个停止定时器的效果clearInterval
4.添加一个按钮，这样点击按钮才会触发事件
5.另外在事件里面前面记得先清除定时器
*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装简单动画函数</title>
<style>
div {
position: absolute;
left: 0px;
height: 100px;
width: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0px;
top: 200px;
display: block;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<button class="zyt">点击祝英台</button>
<button class="lsb">点击梁山伯</button>
<div>梁山伯</div>
<span>祝英台</span>
<script>
//传2个参数，对象obj,移动位置距离target
// 举例，var obj={} obj.name="tom",可以这样写的
function animate(obj, target) {
// 因为添加了点击按钮，防止打开多个定时器，所以每次使用前，清除之前的定时器
clearInterval(obj.timer)
obj.timer = setInterval(function () {//不用var进行声明的原因是因为，如果多个元素 调用的话，会开辟多个空间，消耗内存，根据js对象可以动态添加属性
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 lsb = document.querySelector('.lsb')
var zyt = document.querySelector('.zyt')
// 点击梁山伯进行触发
lsb.addEventListener('click', function () {
animate(div, 300)
})
// 点击祝英台进行触发
zyt.addEventListener('click', function () {
animate(span, 500)
})
</script>
</body>
</html>