其他分享
首页 > 其他分享> > 缓动动画-手风琴/

缓动动画-手风琴/

作者:互联网

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)
}



标签:function,动画,style,box,li,step,缓动,手风琴,ele
来源: https://blog.csdn.net/miaopasi_poi/article/details/116209941