jquery实现图片手风琴效果 - 麦兜家园

话不多说，来看代码实现手风琴效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
    .box{ width:340px; height:260px; margin:0 auto;border:1px solid #f00;overflow: hidden}
    .box ul{ width:340px; height:260px;}
    .box ul li{width:85px; height:260px;float: left}

    .box ul li img{border:0;width:100%;height:100%;display: block;background-size: cover}
</style>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var $li = $(".box li");
        for(var i=0;i<$li.length;i++){
            $li.eq(i).css("backgroundImage","url(img/pic"+ (i+1) +".jpg)");//这里是将我当地文件夹中的图片写入li中，图片分别为pic1，pic2，pic3，pic4
        }
        $li.mouseenter(function(){
           $(this).stop().animate({width:250}).siblings().stop().animate({width:30})
       }).mouseleave(function(){
            $li.stop().animate({width:85})
        })
    })
</script>

</body>
</html>

效果图如下：

注意：以上stop是解决鼠标快速放入图片上的animate的bug问题。

好了效果就是这样，可以试试看呢！

posted on 2018-02-01 22:29 麦兜家园阅读(386) 评论(0) 收藏举报

刷新页面返回顶部