jQuery小项目之王者荣耀手风琴，有图片素材

最新推荐文章于 2022-04-22 16:30:49 发布

知途。

最新推荐文章于 2022-04-22 16:30:49 发布

阅读量2.7k

点赞数 8

文章标签： jquery html css

本文链接：https://blog.csdn.net/weixin_44465745/article/details/107341771

版权

王者荣耀手风琴效果

代码示例
- 图片素材

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者荣耀手风琴效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 769px;
            height: 115px;
            margin:200px auto;
            background: url("./images2/header.png") no-repeat;
            padding: 20px;
        }
        .img{
            display: block;
        }
        ul{
            list-style: none;
        }

        .box ul{
            overflow: hidden;
        }
        .box li{
            width: 69px;
            height: 69px;
            margin-right: 10px;
            float: left;
            position: relative;
        }
        .box .current{
            width: 224px;
        }
        .box .current .big{
            display: block;
        }
        .box .current .small{
            display: none;
        }
        .big{
            display: none;
            width: 224px;
        }
        .small{
            display: block;
            position: absolute;
            width: 69px;
            height: 69px;
            left: 0;
            top: 0;
            border-radius: 5px;
        }

    </style>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $("li").mouseenter(function () {
                //当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width:224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                //其余兄弟小li宽度变为69px,小图片淡入，大图片淡出
                $(this).siblings("li").stop().animate({
                    width:69
                }).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="./images2/01.jpg" alt="" class="small">
                    <img src="./images2/1.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/02.jpg" alt="" class="small">
                    <img src="./images2/2.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/03.jpg" alt="" class="small">
                    <img src="./images2/3.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/04.jpg" alt="" class="small">
                    <img src="./images2/4.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/05.jpg" alt="" class="small">
                    <img src="./images2/5.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/06.jpg" alt="" class="small">
                    <img src="./images2/6.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images2/07.jpg" alt="" class="small">
                    <img src="./images2/7.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

图片素材

在这里插入图片描述

知途。

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
jQuery小项目之王者荣耀手风琴，有图片素材

王者荣耀手风琴效果代码示例图片素材代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王者荣耀手风琴效果</title> <style> *{ margin: 0; padding: 0; } .box{
复制链接

扫一扫