jquery动画遮罩

以前一直以为遮罩都是鼠标移上去，改变透明度实现的，后来看到过这样的一个遮罩动画，然后今天自己写了一个，因为弹出的遮罩是圆形的，所以从美观上来说，这个遮罩效果更适合于方形图片。

<div class="container">
            <ul class="bannerHolder">
                <li>
                    <div class="banner">
                        <a href="#"><img src="1.jpg" width="150" height="150"></a>
                        <p>这是第一张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                    </div>
                </li>
                <li>
                    <div class="banner">
                        <a href="#"><img src="2.jpg" width="150" height="150"></a>
                        <p>这是第二张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                </div>
                </li>
                <li>
                    <div class="banner">
                        <a href="#"><img src="3.jpg" width="150" height="150"></a>
                        <p>这是第三张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                </div>
                </li>
                <li>
                    <div class="banner">
                        <a href="#"><img src="4.jpg" width="150" height="150"></a>
                        <p>这是第四张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                </div>
                </li>
                <li>
                    <div class="banner">
                        <a href="#"><img src="5.jpg" width="150" height="150"></a>
                        <p>这是第五张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                </div>
                </li>
                <li>
                    <div class="banner">
                        <a href="#"><img src="6.jpg" width="150" height="150"></a>
                        <p>这是第六张图片</p>
                        <div class="cornerTL"></div>
                        <div class="cornerTR"></div>
                        <div class="cornerBL"></div>
                        <div class="cornerBR"></div>
                </div>
                </li>
            </ul>
    </div>

首先，是一个class名为container的div作为容器来放置这些图片，然后用ul li标签来排列图片，这里需要着重说明的是，将图片，文字，还有四周遮罩都放在一个class名为banner的div里。

@charset "utf-8";
html, body, p {
     border: 0 ;
     margin: 0;
     padding:0;
     outline-style: none;
     font-size: 12px;
}
.container{
    margin: 50px;
    
}
.bannerHolder{
    width: 1020px;
     padding: 20px 10px 20px 10px;
     background-color: #f7f7f7;
    overflow: hidden;

    border-radius: 12px;
}
.bannerHolder li {
     list-style: none;
     display: inline;
}
.banner{
    width: 150px;
    height: 150px;
    cursor: pointer;
    position: relative;
    float: left;
    overflow: hidden;

    margin: 0 10px;
}
.banner img {
     display: block;
     border: none;
}
.banner div{
    width: 60px;
    height:60px;
    background-color: #222;
    opacity: 0.3;
    z-index: 100;
    position: absolute;
    border-radius: 100px;
}
.banner .cornerTL { left:-63px; top:-63px; }
.banner .cornerTR { right:-63px; top:-63px; }
.banner .cornerBL { left:-63px; bottom:-63px; }
.banner .cornerBR { right:-63px; bottom:-63px; }
.banner p{
    width: 100%;
    left:0;
    position: absolute;
    color: #fff;
    z-index: 200;
    text-align: center;
    display: none;
    top:65px;
    cursor: pointer;
}

这是css的部分，.banner中设置左浮动使图片等行排列，并且.banner的宽和高与图片的宽和高一致，这样弹出的遮罩的圆才会在中心处。将遮罩cornerTL  cornerTR  cornerBL  cornerBR放在四个角上，然后通过div的overflow: hidden将遮罩隐藏起来

<script type="text/javascript">
        $('.banner').hover(function(){
        var el = $(this);
        el.find('div').stop().animate({220,height:220},'slow',function(){
        el.find('p').fadeIn('fast');
        });
    },function(){
        var el = $(this);
        el.find('p').hide();
        el.find('div').stop().animate({60,height:60},'fast');
    }).click(function(){
        window.open($(this).find('a').attr('href'));        
    });
    </script>

这是jquery的部分，注意首先要引入jquery的库。

然后通过hover来实现鼠标移进移出的功能。用animate动画将遮罩的宽和高放大，四角重叠，实现好看的遮罩，并且文字的出现和消失，以及点击会打开一个新的页面。

这是最后实现的效果图，遮罩会从四周弹出，自己下载代码看一下吧。