用jQuery实现手风琴动效

来源：互联网发布：爱温士采暖知乎编辑：程序博客网时间：2024/06/06 20:41

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

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

<!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 0