蒙版的手风琴效果

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

最近公司在网站上需要一个手风琴效果，就手动实现了几种，菜鸟一枚，大佬勿喷。

这个手风琴增加了蒙版效果，看起来更好看

代码采用了jquery的方法，比不带手风琴的代码看起来更美，更加简洁

手风琴效果实现

HTML代码部分

<div class="carousel" id="carousel">
    <ul>
        <li class="img0" id="no0"><div class="mask"></div><img src="images/zss0.jpg" alt=""></li>
        <li class="img01" id="no1"><div class="mask"></div><img src="images/zss1.jpg" alt=""></li>
        <li class="img2" id="no2"><div class="mask"></div><img src="images/zss2.jpg" alt=""></li>
        <li class="img3" id="no3"><div class="mask"></div><img src="images/zss3.jpg" alt=""></li>
        <li class="img4" id="no4"><div class="mask"></div><img src="images/4.jpg" alt=""></li>
    </ul>
</div>

CSS代码部分

* {
    margin: 0;
    padding: 0;
    list-style: none;
  }

.carousel {
    position: relative;
    width: 900px;
    height: 300px;
    margin: 50px auto;
    border: 1px solid blue;
    overflow: hidden;
}
.carousel ul li {
    position: absolute;
    width: 560px;
    height: 300px;
    top: 0;
    left: 0;
}
.carousel ul li.img1 {
    left: 180px;
}
.carousel ul li.img2 {
    left: 360px;
}
.carousel ul li.img3 {
    left: 540px;
}
.carousel ul li.img4 {
    left: 720px;
}
.carousel ul li div.mask {
    position: absolute;
    width: 560px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
}

Javascript部分

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    // 获取元素
    var $carousel = $("#carousel");
    // 添加鼠标进入事件
    $("li").mouseenter(function() {
        // 防流氓
        $("li").stop(true);
        // 定义变量用于保存触发事件的序号
        var idx = $(this).index();
        // console.log(idx);

        // 小于或者等于当前序号的图片应该往左移动 与85相关
        $("li:lt(" + (idx + 1) + ")").each(function(i) {
            // console.log(i);
            $(this).animate({"left": 85 * i}, 500);
        })

        // 大于idx的图片应该往右移动 并且与560相关
        $("li:gt(" + idx + ")").each(function(i) {
            // console.log(i);
            $(this).animate({"left": 560 + 85 * (idx + i)}, 500);
        })

        // 当前蒙版消失
        $(this).children(".mask").stop(true).fadeOut(500);
        // 其他蒙版恢复
        $(this).siblings().children().stop(true).fadeIn(500);
    })

    // 添加鼠标离开事件
    $carousel.mouseleave(function() {
        // 防流氓
        $("li").stop(true);
        // 循环将所有的li 恢复原状
        $("li").each(function(i) {
            $(this).animate({"left": 180 * i}, 500);
        })
        // 所有蒙版恢复
        $(".mask").stop(true).fadeIn(500);
    })
</script> 

总结

其实蒙版手风琴效果实现起来很容易，主要记住以下几点：

1、css中蒙版的效果样式

2、鼠标中的mouseenter和mouseleave事件，防流氓操作也就是我们平时所用到的上锁操作，为什么用上锁了，就是防止多次进入后，造成频繁运动，给人感觉不好

3、大于idx的图片应该往右移动 并且与560相关，这个就是我们定义的宽度

4、当我们离开时要将所有蒙版效果恢复

5、fadeOut和fadeIn就是进入的动画效果

其实实现方法挺多的，不同效果可能存在不同的问题，需要我们不断完善，效果的话直接复制代码更换图片即可。