手风琴效果

利用动画做出手风琴的效果，主要用到的是mouseenter mouseleave animate

我们先看一下css样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            .image-box li {
                width: 240px;
                overflow: hidden;
                float: left;
            }
            .image-box li img {
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="image-box">
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
        
    </body>
</html>

接下来是js代码

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            // $(item)
            // jquery -----> DOM
            // $(item).get(0)
            $('.image-box .item').each(function(index, item) {// jquery 循环each()，里面传入一个函数，两个参数，一个是索引，元素本身（DOM）

                $(item).append("<img src='images/banner"+ (index + 1) +".jpg' />")
            // DOM ---> jquery
            })
            //当鼠标指针穿过元素时，会发生 mouseenter 事件
            $(".item").on("mouseenter", function() {
                $(".item").stop();
                //自定义动画，设置鼠标在移入时让图片放大的宽度，同时利用sibling()找到除了它以外的其他同辈元素，使其宽度变小
                
                $(this).animate({width: 800}, 1000).siblings().animate({width: 100}, 1000)
            }).on("mouseleave", function() {
                $(".item").stop();
                //当鼠标指针离开元素时，会发生 mouseleave 事件，图片大小全部回归原位
                $(".item").animate({width: 240}, 1000);
            })
        </script>

猜你喜欢