男丁格爾's 脫殼玩

沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

Yahoo!奇摩新聞版正在 beta 測試中，每一個分類都會有個一大二小的焦點新聞圖片，當滑鼠移到圖片上時，會再展開額外的說明描述：

這樣的效果讓筆者想到了另一個範例-滑出式說明描述。只是Yahoo!奇摩新聞版的是在標題上面展開說明描述，而筆者的範例是連標題都一起往上展開。所以...如果手癢的就跟著筆者一起來動手做看看吧。

首先一樣先準備個 HTML 內容：

<body>
	<div class="abgne_tip_gallery_block2">
		<a href="#"><img src="images/fashion_light_00.jpg" title="" alt="" /></a>
		<div class="title">
			<h3><a href="#" title="圖片來源-梅問題">圖片來源-梅問題</a></a></h3>
		</div>
		<div class="desc">
			<p>先前曾報名過黃榮正大師的比基尼攝影課，讓梅干對於人像打光，與如何和馬豆互動，有了更進一步的體會，而上星期梅干利用空檔時間，則又參加了黃老師的時尚雜誌風格的攝影課，這回讓梅干收獲頗多，無論在打光還是氣氛的營造，有更進一步的體會，當然還是少不了與馬豆的互動，這次....<a href="http://www.minwt.com/?p=3274" target="_blank">更多»</a></p>
		</div>
	</div>
</body>

接著免不了的還是要得用 CSS 來設計一下：

檢視原始碼 CSS

.abgne_tip_gallery_block2 {
	margin: 0;
	padding: 0;
	width: 500px;
	height: 250px;
	overflow: hidden;
	position: relative;
	border: 1px solid #ccc;
}
.abgne-yahoo-slide img {
	border: 0;
}
.abgne-yahoo-slide  a {
	text-decoration: none;
	color: #fff; 
}
.abgne-yahoo-slide  a:hover {
	color: #fc6;
}
.abgne-yahoo-slide ul, .abgne-yahoo-slide li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne-yahoo-slide .title {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background: url(images/1px_black.png);
}
.abgne-yahoo-slide .title h3 {
	margin: 0;
	padding: 0 0 0 20px;
}
.abgne-yahoo-slide .desc {
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	display: none;
	overflow: hidden;
	color: #fff;
	background: url(images/1px_black.png);
}
.abgne-yahoo-slide .desc p {
	padding: 10px 10px 0;
	font-size: 12px;
	color: #ccc;
}

雖然 CSS 看起來很多的感覺，但筆者保證接下來的 jQuery 就算加上註解後的程式也一定比上面的 CSS 還少，瞧~

檢視原始碼 JavaScript

$(function(){
	// 把每一個 abgne-yahoo-slide 取出做處理
	$('.abgne-yahoo-slide').each(function(){
		// 取得說明描述的高度
		var $this = $(this), 
			$desc = $this.find('.desc'),
			_descHeight = $desc.outerHeight(true),
			_speed = 400;
 
		// 設定 $desc 的高度為 0 並顯示
		$desc.css({
			height: 0,
			display: 'block'
		});
 
		// 當滑鼠移到區塊上時
		$this.hover(function(){
			// 改變 $desc 的高度為原本高度
			$desc.stop().animate({
				height: _descHeight
			}, _speed);
		}, function(){
			// 改變 $desc 的高度為 0
			$desc.stop().animate({
				height: 0
			}, _speed);
		});
	});
});

若只是單純的改變 CStopS 或 bottom 值的話，那麼透明背景圖片就會因為重疊而改變的畫面上看到的顏色深度。所以筆者這邊是利用把 $desc 的高度(height)縮小及還原的方式來做出伸展的功能。

不過因為我們是利用透明的 png 圖來產生背景，但這樣的效果是在 IE6 中是沒有透明效果的。如果要做到像Yahoo!奇摩新聞版一樣也能支援 IE6 的話，那麼就不能直接用圖片囉：

檢視原始碼 JavaScript

// 背景區塊的透明度	
var _opacity = .6;
$(function(){
	// 把每一個 abgne-yahoo-slide 取出做處理
	$('.abgne-yahoo-slide').each(function(){
		// 取得標題及說明描述的高度
		var $this = $(this), 
			$title = $this.find('.title'), 
			_titleHeight = $title.outerHeight(true),
			$desc = $this.find('.desc'),
			_descHeight = $desc.outerHeight(true),
			_speed = 400;
 
		// 設定 $desc 的高度為 0 並顯示
		// 接著插入一個當做背景用的區塊
		$desc.css({
			height: 0,
			display: 'block'
		}).append($('<div></div>').css({
			height: _descHeight,
			opacity: _opacity
		}).addClass('maskCss')).find('p').css('position', 'absolute');
 
		// 插入一個當做背景用的區塊
		$title.append($('<div></div>').css({
			height: _titleHeight,
			opacity: _opacity
		}).addClass('maskCss'));
 
		// 當滑鼠移到區塊上時
		$this.hover(function(){
			// 改變 $desc 的高度為原本高度
			$desc.stop().animate({
				height: _descHeight
			}, _speed);
		}, function(){
			// 改變 $desc 的高度為 0
			$desc.stop().animate({
				height: 0
			}, _speed);
		});
	});
});

然後 CSS 也一樣得修改：

檢視原始碼 CSS

.abgne_tip_gallery_block2 {
	margin: 0;
	padding: 0;
	width: 500px;
	height: 250px;
	overflow: hidden;
	position: relative;
	border: 1px solid #ccc;
}
.abgne_tip_gallery_block2 img {
	border: 0;
}
.abgne_tip_gallery_block2  a {
	text-decoration: none;
	color: #fff; 
}
.abgne_tip_gallery_block2  a:hover {
	color: #fc6;
}
.abgne_tip_gallery_block2 ul, .abgne_tip_gallery_block2 li {
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 1000;
}
.abgne_tip_gallery_block2 .title {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
}
.abgne_tip_gallery_block2 .title h3 {
	margin: 0;
	padding: 0 0 0 20px;
	position: absolute;
	z-index: 1000;
}
.abgne_tip_gallery_block2 .desc {
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	z-index: 999;
	display: none;
	overflow: hidden;
	color: #fff;
}
.abgne_tip_gallery_block2 .desc p {
	padding: 10px 10px 0;
	font-size: 12px;
	color: #ccc;
	z-index: 998;
}
/* 用來當透明背景用的 */
.maskCss {
	width: 100%;
	background-color: #000;
	position: absolute;
	z-index: 997;
}

什麼~程式碼怎麼變多了？這...這就是為了支援 IE6 的代價啊 XD

範例 1 範例 2 範例 3

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

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

izelon4 於 2011-07-20 15:48:07 說：

惡魔般的IE6 !!

登入後再回覆
- 男丁格爾於 2011-07-20 15:50:51 說：
  
  得要付出一些coding的時間才能得到等價交換的相容性。
  
  登入後再回覆
sheephead0818 於 2011-07-21 20:15:31 說：

我喜歡你的東西~~酷斃了!!

登入後再回覆
feegg333 於 2011-08-23 12:57:48 說：

真棒的效果!!

登入後再回覆
小夏於 2012-10-26 14:08:21 說：

請問老師，這個效果我試著套用在blogger上，發表文章的時候加入該圖的abgne_tip_gallery_block2的class，不過並沒有成功，我的方法是把script設定成版面配置文章的區塊，然後再去CSS編輯器裡面加入CSS語法，不知道是哪邊有問題?

登入後再回覆
- 男丁格爾於 2012-11-16 22:34:13 說：
  
  要看到你改過後的內容才知道問題在那咧~
  
  登入後再回覆
Ralph 於 2013-04-20 14:29:55 說：

我想請問如何讓這一個個的滑出示說明方格是往右一直排過去而不是往下排

登入後再回覆
- 男丁格爾於 2013-04-22 10:06:48 說：
  
  我不太懂你要的畫面效果是怎樣咧 XD
  
  登入後再回覆
湯圓於 2013-10-16 11:06:27 說：

感謝老師實用的範例，不過我想請問一下若是要把左右水平圖片輪播加上這效果，我試過在各個li裡加上.title和.desc的內容，不過測試後內容好像會重疊?

登入後再回覆