Jquery------手风琴案例

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

ES6

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

阅读量155

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_48340600/article/details/108862128

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用jQuery实现一个图片布局的鼠标悬停效果。当鼠标悬停在列表项上时，小图片淡出，大图片淡入，同时调整宽度至224像素。其他列表项则缩小到69像素宽度，小图片淡入，大图片淡出。这是一个基本的图像展示交互设计。

摘要由CSDN通过智能技术生成

1、布局

<div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>

2、

$(function () {
            // 鼠标经过，当前小图片淡出，大图片淡入，宽度为224，其他的小图片淡入，大图片淡出，宽度为69
            $(".king li").mouseover(function () {
                $(this).animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
                // 其余兄弟
                $(this).siblings().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
            })
        })