01-缓动动画-手风琴案例
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 2400px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
overflow: hidden;
}
#box li {
width: 240px;
height: 400px;
float: left;
}
</style>
<script src="js/animate.js"></script>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<script>
// 需求：鼠标移入对应的li，变成宽度1000，其他变成50；鼠标整个盒子：都变回240
// 1. 引入动画js文件
// 2. 获取整个：移出事件
let box = document.querySelector('#box')
box.onmouseout = function () {
// 所有li都变成240
lis.forEach(function (item) {
// 宽度变成240
animate(item, 'width', 240)
})
}
// 3. 获取所有的li：鼠标移入事件
let lis = box.querySelectorAll('li')
lis.forEach(function (li) {
li.onmouseover = function () {
// 排他思想（优化）
lis.forEach(function (item) {
// 宽度变成50
if (item === li) {
// 是自己
animate(li, 'width', 1000)
} else {
// 是其他
animate(item, 'width', 50)
}
})
}
})
</script>
</body>
</html>
// 封装函数
// 添加参数：不能固定死，动画元素：ele
// 添加参数：不能固定死，css属性：style
// 添加参数：不能固定死，目标位置：target
// 添加参数：不能固定死，是否有连续动画：fn
function animate(ele, style, target, fn) {
// console.log(fn)
// 2. 定时器
// 2.1 先清除原来的定时器：定时器在元素里面保存
clearInterval(ele.timeId)
// 2.2 开启定时器
ele.timeId = setInterval(function () {
// 获取元素本身的style值（真正的style）：getComputedStyle
let current = parseInt(getComputedStyle(ele)[style])
// console.log(current)
// 3. 位置移动：每次移动 (target - 当前位置) * 0.1
let step = (target - current) * 0.1
// 3.1 细节修正：像素不能是小数
// 判定方向：是正向移动（step > 0），负向移动（step < 0）
if (step > 0) {
step = Math.ceil(step)
}
else {
step = Math.floor(step)
}
// 修改元素样式
ele.style[style] = current + step + 'px'
// console.log(step)
// 4. 结束：可以使用step判定：step最终一定为0
if (step == 0) {
clearInterval(ele.timeId)
// animate(ele, 'top', 400)
// 执行回调函数：为了安全，判定是函数才执行：不是函数就不执行
if (typeof fn == 'function') {
fn()
}
}
}, 10)
}