Home » jQuery 應用

[jQ]滑出式說明描述

[ 日期： | 瀏覽：53,398 | 迴響：47 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 1,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

網頁設計人員都知道 HTML + CSS 是設計時不可或缺。但單純的靜態畫面不太能吸引瀏覽者的注意，所以得在搭配 JavaScript 來讓效果動起來。此次就用簡單的 jQuery 語法來讓原本單調的設計有不同的效果。

先準備個 HTML 內容：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11

<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">
				♣梅問題‧教學網【Minwt】♣ | 分享與記錄關於Photoshop教學、網頁教學、Wordpress教學、Flex教學、 Flash教學&#8230;等，也歡迎遇到以上任何問題都可到梅問題來找答案喔!  |  數位攝影
			</div>
		</div>
	</div>
</body>

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

檢視原始碼 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;
}

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



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

檢視原始碼 CSS
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;
}

所以就能看到...



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

檢視原始碼 JavaScript
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 就能讓原本的設計加分呢！？

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

47 筆針對 [jQ]滑出式說明描述 的迴響

1 2 3 4

  5. 感謝你~~~教學很簡單就成功了
    不過想請問一下，如果我想要在原本的說明框以外，再多加一個命名為caption2
    讓滑鼠移動過去時，兩個說明框移動到不同的位置
    我嘗試後發現，當網頁中只有一張照片時可以
    但是有兩張照片以上時，說明框的移動會有錯誤
    不曉得這樣子的功能要怎麼改程式碼比較正確呢??

    • 如果是參考範例來做的話, 應該是可以滴~
      不過真正的錯誤還是要看你的範例來知道問題在那

1 2 3 4

發表迴響