用jQuery实现手风琴动效

最新推荐文章于 2024-04-16 15:12:02 发布

番茄酱炒梨子

最新推荐文章于 2024-04-16 15:12:02 发布

阅读量722

点赞数

分类专栏： web前端 jquery 文章标签： jquery html

本文链接：https://blog.csdn.net/sinat_25017107/article/details/77940319

版权

web前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

我们以前有在网页上看过手风琴样式的图片切换，默认情况是这样的：
手风琴动效
图片是这样叠加在一起的，当鼠标滑动到其中一张图片上，它会进行展开，显示成一张完整的图片，同时其他几张图片会隐藏更多的部分，演示的截图如下：
这里写图片描述

图片就是这样“点谁谁展开”啦~
下面我将介绍一下这个手风琴动效的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*收缩状态 width 250px*/
            width: 1250px;
            /*展开状态下 当前图片宽度730 其他图片宽度130*/
            height: 336px;
            margin: 100px auto;
            border: 1px solid red;
        }
        .box ul{
            list-style: none;
            width: 1260px;
        }
        .box ul li{
            float: left;
            height: 336px;
            width: 250px;
        }
    </style>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // 分别给每个li设置背景图片
            $('li').each(function(index,element){
                $(element).css("background", "url('./images/"+ (index+1) +".jpg')");
            })

            // 鼠标移动时改变li的宽度
            $('li').mouseenter(function(){
                // 当前li的宽度增加为730px,其他li都是为130px
                // 在开始一个动画之前先停止之前已经在执行的动画，否则新的动画会自动的添加到动画队列中，等待前一个动画执行完毕后再开始执行
                $(this).stop().animate({width:730},1000).siblings('li').stop().animate({width:130},1000);;
            })
            // 鼠标离开时恢复初始状态
            $('li').mouseout(function(){
                $('li').stop().animate({width:250},1000);
            })
        })
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

以上就是完整的手风琴动效的图片切换的代码了，需要注意的点就是需要计算好每张图片显示的宽度，同时，滑动鼠标时会发现图片一直滑动，那么解决这个问题的方法就是在动画开始之前使用stop()，这个函数的作用是在开始一个动画之前停止前一个正在执行的动画，这样可以避免图片一直滑动的问题。
通过这个案例，我们可以了解到jQuery的代码十分的简短，一开始遇到这个问题的时候思路是将图片叠加起来再不停改变其z-index，发现自己想的复杂了，其实只要改变图片的宽度就可以实现，这个案例告诉我们问题的解决方法不止一种，我们要善于去想出一个最简单易懂的方法，这样可以帮助我们节省很多的时间和精力。

番茄酱炒梨子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现手风琴动效

我们以前有在网页上看过手风琴样式的图片切换，默认情况是这样的：图片是这样叠加在一起的，当鼠标滑动到其中一张图片上，它会进行展开，显示成一张完整的图片，同时其他几张图片会隐藏更多的部分，演示的截图如下：图片就是这样“点谁谁展开”啦~ 下面我将介绍一下这个手风琴动效的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
复制链接

扫一扫