手风琴案例（Jquery）

最新推荐文章于 2022-11-20 20:53:52 发布

LBY_XK

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/LBY_XK/article/details/117601924

版权

首先需要下载并引入Jquery

<!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>
    //引入jquery文件
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
        body ul {
            padding: 0;
            margin: 0;
        }
        
        .contain {
            width: 433px;
            height: 69px;
            margin: 100px auto;
        }
        
        .contain ul {
            list-style: none;
        }
        
        .contain ul li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            overflow: hidden;
        }
        
        .contain ul li:nth-child(1) {
            width: 224px;
        }
        
        .contain ul li .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 10px;
        }
        
        .contain ul li:nth-child(1) .small {
            display: none;
        }
        
        .contain ul li .large {
            width: 224px;
            display: none;
        }
        
        .contain ul li:nth-child(1) .large {
            width: 224px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="contain">
        <ul>
            <li>
                <a href="">
                    <img class="small" src="./static/img/dianwei.jpg" alt=""><img class="large" src="./static/img/dianwei.png" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img class="small" src="./static/img/jialuo.jpg" alt=""><img class="large" src="./static/img/jialuo.png" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img class="small" src="./static/img/wangzhaojun.jpg" alt=""><img class="large" src="./static/img/wangzj.png" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img class="small" src="./static/img/yao.jpg" alt=""><img class="large" src="./static/img/yao.png" alt="">
                </a>
            </li>
        </ul>
    </div>

    <script>
        $(function() {
            // 鼠标经过li的操作
            $('ul li').mouseover(function() {
                // 设置li的长度  并让小图片隐藏
                $(this).stop().animate({
                        width: 224
                    }).find('.small').stop().fadeOut().siblings('.large').stop().fadeIn()
                    // 让其他li进行隐藏
                $(this).siblings('li').stop().animate({
                    width: 69
                }).find('.small').stop().fadeIn().siblings('.large').stop().fadeOut()
            })

        })
    </script>
</body>

</html>