JavaScript - WebAPI - 动画 - 案例 - 手风琴图

最新推荐文章于 2022-12-09 20:46:55 发布

Henry_ww

最新推荐文章于 2022-12-09 20:46:55 发布

阅读量179

点赞数

分类专栏：案例文章标签： animation dom

本文链接：https://blog.csdn.net/Henry_ID/article/details/119700072

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!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>手风 琴</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>
    </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>
    </body>
    <script src="./js/animation.js"></script>
    <script>
        // 获取相关元素
        const lis = document.querySelectorAll("#box li");
        console.log(lis);

        // 遍历每一个li,鼠标移入移出事件
        lis.forEach(function (li) {
            li.onmouseover = function () {
                // 排他,先统一
                lis.forEach(function (item) {
                    // 动画
                    animation(item, 50, "width");
                });
                // 后特殊
                animation(li, 1000, "width");
            };
        });

        document.querySelector("#box").onmouseout = function () {
            // 所有li恢复240
            lis.forEach(function (li) {
                animation(li, 240, "width");
            });
        };
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 动画 - 案例 - 手风琴图

<!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" /&gt
复制链接

扫一扫