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

最新推荐文章于 2023-08-25 01:32:18 发布

VIP文章 qq_42095103

最新推荐文章于 2023-08-25 01:32:18 发布

阅读量994

点赞数 1

文章标签： jquery 前端 javascript

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

版权

一、案例实现效果

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>
            <li class="three">
                <img src="./images/3.webp" alt="" class="small">

最低0.47元/天解锁文章

qq_42095103

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于JQuery的动画案例-手风琴、动态移动展示效果

手风琴效果实际上是一个ul标签下面包含了7个小li标签，然后每一个小li标签下面有两张图片，一个为表面的小图片和被隐藏之后的大图片，然后小图片是以绝对定位显示在小li中，而小li标签是以相对定位排列在ul标签当中；当鼠标进入小li标签时，要让li标签大小变为大图片的大小，同时小图片淡出，大图片淡入，还要注意的是：当前li标签变化时，要还原其他小li标签为小图片的状态。
复制链接

扫一扫