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:;
      padding:;
      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:;
     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:;
     position: absolute;
     color: #fff;
     z-index:;
     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({width:220,height:220},'slow',function(){
        el.find('p').fadeIn('fast');
        });
    },function(){
        var el = $(this);
        el.find('p').hide();
        el.find('div').stop().animate({width:60,height:60},'fast');
    }).click(function(){
        window.open($(this).find('a').attr('href'));
    });
    </script>

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

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

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