[jQuery] 可連結的區塊元素

很久以前在Smiley Cat看過一篇教學,將整個區塊元素變成可連結,並且在滑鼠移過時變換背景顏色:
link hover effect on Veerle's blog

要完成這個效果,有兩個重點:

  • 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
  • 必須讓整個區塊可以連結。

在Smiley Cat的教學中,利用CSS設定將 a 元素改為display:block,因為 a 元素除了可以連結之外,在CSS中,又能使 :hover 這個偽類別(pseudo-classes)產生作用(:hover如果不用在 a 元素,而用在其他區塊元素如 li:hover,IE 6是不支援的)。

而最近Web Designer Wall則有一篇jQuery十大特效的教學(jQuery Tutorials for Designers),裡面的第六項:Entire block clickable,提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS,並做了一點修改,讓區塊變換背景顏色與連結的效果都採用JQuery控制,成果請見demo頁面

和Smiley Cat一樣,Web Designer Wall也是採用 li 元素來排列這三個區塊,XHTML的原始碼結構如下:

<ul class="pane-list">
	<li>
		<h3><a href="http://www.webdesignerwall.com">Web Designer Wall</a></h3>
		<p>A wall of design ideas, web trends, and tutorials</p>
	</li>
	<li>
		<h3>Best Web Gallery</h3>
		<p>Featuring the best <a href="http://bestwebgallery.com">CSS and Flash web sites</a></p>
	</li>
	<li>
		<h3>N.Design Studio</h3>
		<p><a href="http://www.ndesign-studio.com">Blog</a> and design portfolio of Nick La</p>
	</li>
</ul>

而CSS的相關設定則為:

.pane-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pane-list li {
	background: #ecfad7;
	padding: 10px 20px 10px;
	border-top: solid 1px #c4df9b;
	cursor: pointer; //修改滑鼠游標
}

至於重頭戲jQuery的部份,原始碼如下:

$(document).ready(function(){
	$(".pane-list li").hover(function(){
		$(this).css("background-color", "#f6ffe9");
	}, function(){
		$(this).css("background-color", "#ecfad7");
	});
	$(".pane-list li").click(function(){
    	window.location=$(this).find("a").attr("href");return false;
	});
});

上面的動作,要處理的有兩件事情:

  • 當滑鼠移過 li 區塊時會變化背景顏色:使用 .hover事件,修改 li 的background-color。
  • 點擊整個 li 區塊即可以連結:使用 .click事件,並利用$(this).find("a").attr("href");取得連結網址。

這篇jQuery Tutorials for Designers裡面的十大特效都非常簡單實用,一定能幫助有XHMTL和CSS基礎的網頁設計師做出互動性更強的網頁,快去看看吧。

可能的相關文章:

 
 
 

歡迎留言: