看到阿里云官网的东晓是使用雪碧图做的
于是想着也写一个，把图片复制来后开始写，思路就是利用onmouseover和out事件，然后使用setInterval累计他的backgroundPositionY属性，
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 60px;
height: 60px;
overflow: hidden;
background-image: url('./deo.png');
background-repeat: no-repeat;
background-size: 100%;
/* background-position-y: 0px; */
}
</style>
<body>
<div class="box"></div>
<div style="background-color: red;">
11
</div>
</body>
<script>
let box = document.querySelector('.box')
// 防抖
const debounce = (fn, time) => {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, time);
}
}
let y = 60
// let num = 1
box.addEventListener('mouseover', () => {
let num = 1
let a = setInterval(() => {
if (num === 20) {
clearInterval(a);
} else {
num++
}
box.style.backgroundPositionY = -y * num + 'px';
}, 40)
})
box.addEventListener('mouseout', () => {
let num = 1
let a = setInterval(() => {
num++
box.style.backgroundPositionY = -1200 + (y * num) + 'px';
if (num == 20) {
clearInterval(a);
}
console.log(num)
}, 40)
})
</script>
</html>
```
代码这里，但是现在有个问题，就是mouseover事件如果频繁触发的话效果会出问题，不知道有没有什么好的方法，防抖也没什么用
