基于JQuery的动画案例-手风琴、动态移动展示效果

最新推荐文章于 2025-05-07 11:06:16 发布

qq_42095103

最新推荐文章于 2025-05-07 11:06:16 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_42095103/article/details/127840032

本文详细介绍了如何使用JQuery实现手风琴效果和动态图片展示。通过HTML布局、CSS样式设置及JQuery交互，鼠标经过小图片时展开大图，点击图片则动态左右移动切换展示不同图片。总结中强调了动画效果的实现细节及避免动画排队的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、案例实现效果

1、当鼠标移动小图片上时，展开一张长图，实现手风琴效果；

2、当鼠标点击图片时，下方区域展示一张大图，并向右移动，到达某个位置时，向左返回并切换成另一张图，实现动态展示的效果。

二、案例实践

首先，搭好HTML框架。要实现手风琴效果，可以创建一个无序列表ul，ul的每个li中放两个img标签，一个img标签放小图，另一个img标签放展开图。

<body>
    <div class="pic">
        <div class="intro">周免英雄（11月7日-11月13日）</div>
        <ul class="clearfix">
            <li class="one">
                <img src="./images/1.webp" alt="" class="small">
                <img src="./images/1-hover.png" alt="" class="big">
            </li>
            <li class="two">
                <img src="./images/2.webp" alt="" class="small">
                <img src="./images/2-hover.png" alt="" class="big">
            </li>