jQuery（三）手风琴效果

We_jia

于 2019-03-15 12:14:59 发布

阅读量215

点赞数

分类专栏： jQuery 文章标签：手风琴

本文链接：https://blog.csdn.net/We_jia/article/details/87972033

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果展示

思路分析

手风琴效果：当鼠标进入某个图片，当前图片展开，同胞兄弟图片全部合着

注意：（1）添加标记，标记当前展开图片，可以在鼠标离开时，回到默认状态

（2）需要使用stop()处理连续多次滑动图片的情况

（3）添加鼠标离开整体框事件，设置属性回到默认状态，并使用stop()处理不断进入出去情况

全部

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.7.min.js"></script>
    <script src="jscontent/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu li{
            list-style: none;
            float: left;
            width: 100px;
            height: 300px;
            overflow: hidden;
        }
        .menu li>span{
            position: absolute;
            display: block;
            width: 100px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background-color: rgba(191, 215, 255, 0.42);
        }
        .menu li>img{
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li><span>风景</span><img src="./img/1.jpg" alt=""/></li>
    <li><span>风景</span><img src="./img/2.jpg" alt=""/></li>
    <li><span>风景</span><img src="./img/3.jpg" alt=""/></li>
    <li><span>风景</span><img src="./img/4.jpg" alt=""/></li>
    <li><span>风景</span><img src="./img/5.jpg" alt=""/></li>
    <li><span>风景</span><img src="./img/6.jpg" alt=""/></li>
</ul>
</body>
</html>

JavaScript

//有一个缺点:没有固定宽，若屏幕太小会折行
//修改,将默认图片全部合着，改为默认一个图片展开
$(function () {
    $(".menu").bind("mouseleave", function () {
        $(this).children("li").each(function () {
            if ($(this).prop("data-show")) {
                $(this).stop().animate({
                    width: 100
                }, 300)
            }
        })
    })
        .children("li").each(function () {
            $(this).bind("mouseenter", function () {
                //添加标记
                $(this).prop("data-show", true);
                $(this).stop().animate({  //停止当前动画，进入下一个
                    width: 500
                }, 300).siblings().stop().animate({
                    width: 100
                }, 300, function () {
                    $(this).removeAttr("data-show");
                })
            })
        });

});