缓动动画-手风琴/
作者:互联网
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>
- js文件
// 封装函数
// 添加参数:不能固定死,动画元素: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)
}
标签:function,动画,style,box,li,step,缓动,手风琴,ele 来源: https://blog.csdn.net/miaopasi_poi/article/details/116209941