Home » jQuery 應用

[jQ]滑出式說明描述

[ 日期： | 瀏覽：53,397 | 迴響：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

  1. to vic
    使用IE6~IE8測試皆正常
    PS：因為IE6不支援PNG透明度，所以在IE6顯示只是沒有透明的全黑圖片，若不是的話，可試著將圖片轉為GIF。

  2. 效果真的很好耶!可是我照著做之後有幾件事情想虛心請教..

    這一段是連結到板大自己撰寫的js嗎!?完全照上面製作後.若沒有寫這段就沒有效果..是甚麼原因!?

  5. 老師您好
    有辦法將 [jQ]滑出式說明描述 和 [jQ]用 jQuery 做畫廊 – 圖片展示之左右隱藏箭頭

    兩個綜合在一起的版本嗎？ 我自己嘗試弄 不過弄出錯誤..

  8. 不好意思@@ 小弟還是不懂...網頁上面沒有說明這支query

    但是少了他我的標題又動不起來!!

    可以說明一下是在做什麼的嗎???? 剛入門 不好意思!!

  9. 先感謝男丁做的,真的很好!!!效果十足呀~但是我有個問題,當我把它置中的時候,圖片會被砍掉一半,放入TABLE照片會被砍一半~但大小不變!!問男丁大,這該怎麼解決呢!

  10. 您好~
    上次的很謝謝您的回答，
    問題已經解決了:D
    =
    這次想請教，
    能將"滑出式說明描述"和"頁籤式廣告輪播"作整合嗎？
    先感謝回覆了!

1 2 3 4

發表迴響