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里。

 1 @charset "utf-8";
 2 html, body, p {
 3      border: 0 ;
 4      margin: 0;
 5      padding:0;
 6      outline-style: none;
 7      font-size: 12px;
 8 }
 9 .container{
10     margin: 50px;
11     
12 }
13 .bannerHolder{
14     width: 1020px;
15      padding: 20px 10px 20px 10px;
16      background-color: #f7f7f7;
17     overflow: hidden;
18 
19     border-radius: 12px;
20 }
21 .bannerHolder li {
22      list-style: none;
23      display: inline;
24 }
25 .banner{
26     width: 150px;
27     height: 150px;
28     cursor: pointer;
29     position: relative;
30     float: left;
31     overflow: hidden;
32 
33     margin: 0 10px;
34 }
35 .banner img {
36      display: block;
37      border: none;
38 }
39 .banner div{
40     width: 60px;
41     height:60px;
42     background-color: #222;
43     opacity: 0.3;
44     z-index: 100;
45     position: absolute;
46     border-radius: 100px;
47 }
48 .banner .cornerTL { left:-63px; top:-63px; }
49 .banner .cornerTR { right:-63px; top:-63px; }
50 .banner .cornerBL { left:-63px; bottom:-63px; }
51 .banner .cornerBR { right:-63px; bottom:-63px; }
52 .banner p{
53     width: 100%;
54     left:0;
55     position: absolute;
56     color: #fff;
57     z-index: 200;
58     text-align: center;
59     display: none;
60     top:65px;
61     cursor: pointer;
62 }

这是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动画将遮罩的宽和高放大，四角重叠，实现好看的遮罩，并且文字的出现和消失，以及点击会打开一个新的页面。

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