問題討論區


【JavaScript 語法】文章精華區


【教學】 滑出式說明描述



滑出式說明描述
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
網頁設計人員都知道 HTML + CSS 是設計時不可或缺。但單純的靜態畫面不太能吸引瀏覽者的注意,所以得在搭配 JavaScript 來讓效果動起來。此次就用簡單的 jQuery 語法來讓原本單調的設計有不同的效果。

先準備個 HTML 內容:


<body>
    <
div class="abgne_tip_gallery_block">
        <
a href="#"><img src="images/m01.jpg" title="" alt="" /></a>
        <
div class="caption">
            <
h2><a href="#" title="圖片來源-梅問題">圖片來源-梅問題</a></h2>
            <
div class="desc">
                &
#9827;梅問題•教學網【Minwt】&#9827; | 分享與記錄關於Photoshop教學、網頁教學、Wordpress教學、Flex教學、 Flash教學&#8230;等,也歡迎遇到以上任何問題都可到梅問題來找答案喔!  |  數位攝影
            
</div>
        </
div>
    </
div>
</
body>


接著就是各位設計人員熟悉的 CSS 部份:


.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;
}


設計後的畫面就是一般很常見的照片加上標題及描述內容:

Open in new window


不過這樣一股腦的把描述內容都顯示出來的話,幾乎把正妹照都遮掉一大半了,最重要的下半身就看不到哩。所以筆者把整個描述的部份只顯示標題:


.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;
}


所以就能看到...

Open in new window


嘿~可別以為筆者忘了最重要的描述內容的部份。目前雖然看不到,但筆者把它設計成當滑鼠移到圖片上時就能把其它部份展開來。


$(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 就能讓原本的設計加分呢!?

範例瀏覽:
http://demonstration.abgne.tw/jquery/0029/0029.html


以上內容於2010-11-04 17:41 發表在 http://abgne.tw/jquery/apply-jquery/slide-description-show.html

2010/11/13 12:14
 


回覆: 滑出式說明描述-請問可以做兩個說明圖框嗎?
會員一級
註冊日期:
2011/10/14 10:24
留言: 1
這篇文章真的很好用~~~感謝你的分享
我照著教學已經成功在照片上加入動態的說明圖框
不過想請教一下,請問我是否可以在CSS中另外命名一個.caption2
當滑鼠移動到照片上後,讓原本的.caption和新的.caption2,兩個圖框移動到不同的位置呢?

我嘗試修改之後,當一個網頁中一張照片圖框的顯示跟移動是正常的
但是網頁中有兩個照片以上,顯示就開始出現錯誤

放上一小段html碼

<div class="abgne_tip_gallery_block">
<img src="images/photo01.jpg" width="945" /></a>
<div class="caption">
<h2><a title="照片1" href="LYmap_05.html">五</a></h2>
ZOOM IN
</div>
<div class="caption2">
照片描述1
</div>
</div>

<div class="abgne_tip_gallery_block">
<img src="images/photo02.jpg" width="945" /></a>
<div class="caption">
<h2><a title="照片2" href="LYmap_06.html">五</a></h2>
ZOOM IN
</div>
<div class="caption2">
照片描述2
</div>
</div>


請問有甚麼地方是可以修改的呢?

2011/10/14 11:27
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS