jquery動畫遮罩 - hsprout－IT工程師數位筆記本

文章出處

以前一直以為遮罩都是鼠標移上去，改變透明度實現的，后來看到過這樣的一個遮罩動畫，然后今天自己寫了一個，因為彈出的遮罩是圓形的，所以從美觀上來說，這個遮罩效果更適合于方形圖片。

<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({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>