js实现手风琴效果

最新推荐文章于 2024-06-12 20:47:03 发布

panliyou

最新推荐文章于 2024-06-12 20:47:03 发布

阅读量4.7k

点赞数 1

分类专栏： js的哪些事 jq jq特效文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_39411655/article/details/113922286

版权

jq 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

js的哪些事

5 篇文章 0 订阅

订阅专栏

jq特效

1 篇文章 0 订阅

订阅专栏

js实现手风琴效果

这里需要用到上一篇文章里封装好的缓动动画
https://blog.csdn.net/weixin_39411655/article/details/113914024.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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

        /*
            思路分析
            1. 引入动画js
            2. js在结构上面：window.onload
            3. 鼠标移入li事件：获取所有li，遍历，绑定事件（鼠标移出也有事件）
            4. 事件处理：排他
        */
        // 思路分析
        //     1. 引入动画js
        //     2. js在结构上面：window.onload
        window.onload = function () {
            //     3. 鼠标移入li事件：获取所有li，遍历，绑定事件（鼠标移出也有事件）
            let lis = document.querySelectorAll('li');
            let ul = document.querySelector('ul');
            console.log(lis);

            lis.forEach(function (li) {
                li.onmouseover = function () {
                    console.log(1);

                    lis.forEach(function (item) {
                        console.log(item);
                        animate(item, 50, 'width')
                    });
                    animate(li, 1000, 'width')
                }

                li.onmouseout = function () {
                    // console.log(1);

                    lis.forEach(function (item) {
                        console.log(item);
                        animate(item, 240, 'width')
                    });


                }

            });






            //     4. 事件处理：排他
        }


    </script>
</body>

</html>