缓动动画-手风琴/360-开机动画隐藏

最新推荐文章于 2021-05-05 20:18:31 发布

喵帕斯_喵太

最新推荐文章于 2021-05-05 20:18:31 发布

阅读量75

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116209941

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

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

02-缓动动画-360开机动画隐藏

<!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>
        .box {
            /*width: 322px;*/
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            /*background-color: red;*/
            cursor: pointer;
        }
    </style>
    <script src="js/animate.js"></script>
</head>

<body>
    <div class="box">
        <span></span>
        <div class="hd">
            <img src="images/t.jpg" alt="" />
        </div>
        <div class="bd">
            <img src="images/b.jpg" alt="" />
        </div>
    </div>


    <script>
        // 需求：点击关闭按钮，先高度下降（下面图片没了），在宽度下降（整个盒子没了）

        // 1. 获取相关元素：按钮、盒子、下图div
        let box = document.querySelector('.box')
        let span = box.firstElementChild
        let bd = box.lastElementChild
        // 2. 给按钮做点击事件
        span.onclick = function () {
            // 3. 事件处理
            // 3.1 让下图对应的div的高度降为0（动画回调）
            animate(bd, 'height', 0, function () {
                // 3.2 让大盒子的宽度变成0
                animate(box, 'width', 0)
            })

        }

    </script>
</body>

</html>

注：JS文件同上

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓动动画-手风琴/360-开机动画隐藏

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">
复制链接

扫一扫