二十一、手风琴蒙版效果

20.1 DOM

给每一个li加一个div

<div class="carousel" id="carousel">
    <ul class="unit" id="unit">
        <li class="no0" id="no0"><div class="mask"></div><img src="images/lunbo/1.jpg" alt=""></li>
        <li class="no1" id="no1"><div class="mask"></div><img src="images/lunbo/2.jpg" alt=""></li>
        <li class="no2" id="no2"><div class="mask"></div><img src="images/lunbo/3.jpg" alt=""></li>
        <li class="no3" id="no3"><div class="mask"></div><img src="images/lunbo/4.jpg" alt=""></li>
        <li class="no4" id="no4"><div class="mask"></div><img src="images/lunbo/5.jpg" alt=""></li>
    </ul>
</div>

20.2 css

给每一个li里的div添加：

.carousel ul li .mask {
    position: absolute;
    width: 220px;
    height: 150px;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
}

20.3 jquery

<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $carousel = $("#carousel");

    // 添加鼠标移入事件
    $("li").mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        // 定义变量 用于保存触发事件的对象
        var idx = $(this).index();
        // 小于或者等于当前序号的图片，向左移动 与70相关
        $("li:lt(" + (idx + 1) + ")").each(function(i){
            // console.log(i) // 表示遍历到的该对象的序号
            $(this).animate({"left": 70 * i},500);
        });
        // 大于idx的图片应该向右移动 与100相关
        $("li:gt(" + idx + ")").each(function(i){
            // console.log(i) // 表示遍历到的选中该对象的序号（永远从0开始）
            $(this).animate({"left": 220 + 70 * (idx + i)},500);
        });
        // 当前蒙版消失
        $(this).children(".mask").stop(true).fadeOut(500);
        // 当前蒙版恢复
        $(this).siblings().children(".mask").stop(true).fadeIn(500);
    });
    
    // 给carousel添加鼠标离开事件
    $carousel.mouseleave(function(){
        // 防流氓
        $("li").stop(true);
        $("li").each(function(i){
            $(this).animate({"left": 100 * i},500);
        });
        // 所有蒙版恢复
        $(".mask").stop(true).fadeIn(500);
    });
</script>