jQuery-＜王者荣耀＞-手风琴效果

最新推荐文章于 2023-02-11 16:53:06 发布

木偶☜

最新推荐文章于 2023-02-11 16:53:06 发布

阅读量8.3w

点赞数

分类专栏： jQuery 文章标签： jquery js html 手风琴前端

本文链接：https://blog.csdn.net/qq_45096273/article/details/111303839

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言:初始jQuery,今天来做个练习实现王者荣耀的手风琴效果。
---------------------我们先来看看官网上面实现的效果：--------------------------------------
在这里插入图片描述

接下来我们来想想怎么实现这个效果：

一.思路分析

由图分析,需要的元素有:ul,li,a,img;

一个li下存在一个a标签,a标签里面包含两个img标签;

需要的自定义动画以及元素的淡入淡出。

自定义动画：animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

淡入:fadeIn([speed],[easing],[fn])

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

淡出:fadeOut([speed],[easing],[fn])

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

二.具体实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css初始化 */
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 整体的ul进行简单的样式设计 */
        
        ul {
            list-style: none;
            width: 641px;
            height: 72px;
            border: 1px solid #666;
            margin: 100px auto;
        }
        /* 设置浮动以及大小 */
        
        ul li {
            float: left;
            width: 69px;
            height: 69px;
        }
        /* a标签的大小以及为父元素设置相对定位 */
        
        ul li a {
            display: inline-block;
            width: 100%;
            height: 100%;
            position: relative;
        }
        /* img标签的大小以及为子元素设置相对定位 */
        
        ul li a img {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        /* 设置一个初始的类,因为第一张默认为大图 */
        
        .change {
            width: 224px;
            height: 100%;
        }
        /* 将大图都先进行隐藏 */
        
        .big {
            display: none;
        }
    </style>
    <script src="jQuery/jquery-3.5.1.js"></script>
    <!-- 引入jQuery文件 -->
</head>

<body>
    <ul>
        <li class="change">
            <a href="#">
                <img class="small" src="img/xhc1.jpg" alt="">
                <!-- 先把第一张大图显示出来 -->
                <img class="big" src="img/xhc2.png" alt="" style="display:block;">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/dw1.jpg" alt="">
                <img class="big" src="img/dw2.png" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/jl1.jpg" alt="">
                <img class="big" src="img/jl2.png" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/smx1.jpg" alt="">
                <img class="big" src="img/smx2.png" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/wzj1.jpg" alt="">
                <img class="big" src="img/wzj2.png" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/xc1.jpg" alt="">
                <img class="big" src="img/xc2.png" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="small" src="img/y1.jpg" alt="">
                <img class="big" src="img/y2.png" alt="">
            </a>
        </li>
    </ul>
    <script type="text/javascript">
        $(function() {
            $("ul li").mouseenter(function() {
                //li 宽度变为 224px，小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut(600).siblings(".big").stop().fadeIn(600);
                //兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn(600).siblings(".big").stop().fadeOut(600);
            })
        });
    </script>
</body>

</html>