2012年2月8日 星期三

JavaScript 教學 – 圖片的滑出式說明描述

網頁設計人員都知道 HTML + CSS 是設計時不可或缺。但單純的靜態畫面不太能吸引瀏覽者的注意，所以得在搭配 JavaScript 來讓效果動起來。此次就用簡單的 jQuery 語法來讓原本單調的設計有不同的效果。
「JavaScript 教學」滑出式說明描述 
先準備個 HTML 內容：
1
2
3
4
5
6
7
8
9

<div class="abgne_tip_gallery_block">
        <a href="#"><img title="" alt="" src="images/m01.jpg"></a>
        <div class="caption">
            <h2><a title="圖片來源-梅問題" href="#">圖片來源-梅問題</a></h2>
            <div class="desc">
                ♣梅問題‧教學網【Minwt】♣ | 分享與記錄關於Photoshop教學、網頁教學、Wordpress教學、Flex教學、 Flash教學…等，也歡迎遇到以上任何問題都可到梅問題來找答案喔!  |  數位攝影
            </div>
        </div>
    </div>
接著就是各位設計人員熟悉的 CSS 部份：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.abgne_tip_gallery_block {
    margin: 0;
    padding: 0;
    width: 450px;
    height: 250px;
    overflow: hidden;
    position: relative;
}
.abgne_tip_gallery_block img {
    position: absolute;
    border: 0;
}
.abgne_tip_gallery_block .caption {
    position: absolute;
    bottom: 0;
    width: 390px;    /* .abgne_tip_gallery_block 的寬 - .caption 的左右 padding */
    padding: 15px 30px 20px;
    cursor: pointer;
    color: #fff;
    background: url(images/1px_black.png) repeat;
}
.abgne_tip_gallery_block .caption h2 {
    margin: 0;
    padding: 0px 0px 15px;
}
.abgne_tip_gallery_block .caption h2 a {
    text-decoration: none;
    color: #fc6;
}
.abgne_tip_gallery_block .caption h2 a:hover {
    text-decoration: underline;
}
設計後的畫面就是一般很常見的照片加上標題及描述內容：
不過這樣一股腦的把描述內容都顯示出來的話，幾乎把正妹照都遮掉一大半了，最重要的下半身就看不到哩。所以筆者把整個描述的部份只顯示標題：
1
2
3
4
5
6
7
8
9

.abgne_tip_gallery_block .caption {
    position: absolute;
    top: 195px;    /* .abgne_tip_gallery_block 的高 - 想顯示 title 的高(這邊是設 55) */
    width: 390px;    /* .abgne_tip_gallery_block 的寬 - .caption 的左右 padding */
    padding: 15px 30px 20px;
    cursor: pointer;
    color: #fff;
    background: url(images/1px_black.png) repeat;
}
所以就能看到…
嘿~可別以為筆者忘了最重要的描述內容的部份。目前雖然看不到，但筆者把它設計成當滑鼠移到圖片上時就能把其它部份展開來。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(function(){
    // 預設標題區塊 .abgne_tip_gallery_block .caption 的 top
    var _titleHeight = 55;
    $('.abgne_tip_gallery_block').each(function(){
        // 先取得區塊的高及標題區塊等資料
        var $this = $(this),
            _height = $this.height(),
            $caption = $('.caption', $this),
            _captionHeight = $caption.outerHeight(true),
            _speed = 200;
 
        // 當滑鼠移動到區塊上時
        $this.hover(function(){
            // 讓 $caption 往上移動
            $caption.stop().animate({
                top: _height - _captionHeight
            }, _speed);
        }, function(){
            // 讓 $caption 移回原位
            $caption.stop().animate({
                top: _height - _titleHeight
            }, _speed);
        });
    });
});
這樣在瀏覽者未把滑鼠移入圖片前就是看到基本的標題，而滑鼠移入圖片後就能描述內容的多寡來決定要展開多少的部份囉。是不是加上一點點 JavaScript 就能讓原本的設計加分呢！？
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)