首頁 > JQuery > [JQuery]九宮格圖片展示效果 fade callfunction

[JQuery]九宮格圖片展示效果 fade callfunction

2010年2月4日  瀏覽次數 : 4,503
閱讀評論 發表評論

本來對 JQUERY 不是很熟悉，只是看書隨便摸摸，不過因為 FLEX 在寫了一段時間以後，發現 FLASH 雖然好用，但也不是萬能，由其對於 HTML 的結構控制應該是問題很大，所以，還是花了一些時間來學 JQUERY ，希望未來可以愛上 JAVASCRIPT 囉。這次剛好在做一個換圖效果，因此就稍微整理一下比較有問題的地方。

image 範例圖片來源 : MOBILE01 汽車分享 文章 : 魅力無法擋 - Audi TTS

我們這次要做的效果，就當我們點選下方九宮格圖片的時候，可以把上方的圖片換成我們點擊到的圖片，並且先將圖片淡出，換好圖片之後在淡入。先來看一下範例吧。

showExample1111111[1]

依照直覺上的寫法我們應該會將

$(“img”).fadeOut().attr(“src”,$(this).attr(“src”)).fadeIn();

利用 JQuery 串接的特性，將所有的動作一氣呵成，不過這時候卻出包了，圖片還沒有淡出就將位置更改了，原因是因為在 JQ 的動畫串接，前後者都必須是動畫，才會用排序的方式進行，而 .attr() 則是變動屬性，因此當這樣的寫法會先去更改屬性，再將圖片淡出，在淡入，但是這樣卻不是我們要的效果

所以我們就必須將成更改屬性的動作放在 .fadeOut() 的 callFunction 內，寫法只需要將動作放在淡出內。

$(“img”).fadeOut(function(){

    $(this).attr(“src”,$(this).attr(“src”)).fadeIn();

                           注意 : ↑ 這裡的 this 已經變更為 淡出的圖片 ，而非點擊的圖片

});

所以當我們改成這樣寫的時候 $(this) 又被更改了，因此我們必須將上一層的 this 先找個變數計錄起來，最後我們應該要這樣寫

JS CODE

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
 * @author ausir
 */
 
 $().ready(function(){
 	//當九宮格的圖片 被點擊 的時候
	$(".gridarea img").click(function(){
		//先將觸發事件的物件放入變數中等待未來使用
		var $img = $(this);
		//先將大圖淡出
		$(".showarea img").fadeOut(function(){
			//因為更改屬性動作不屬於動畫事件
			//因此要把更改屬性放在淡出的 CALLFUNC 內
			//才可以確定淡出以後才換圖片連結
			//最後再將圖片淡入
			$(".showarea img").attr("src",$img.attr("src")).fadeIn();
		});
	});
 });

 

加上偵聽索引，就變成實際應用範例

showExample1111111[1]

也附上 HTML 與 CSS 給大家參考囉

HTML CODE

?View Code HTML
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
33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宮格換圖</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="class0204.js"></script>
 
<link href="class0204.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="showarea">
	<img src="images/0.jpg" width="640" height="426" />
</div>
 
<div class="gridarea">
    <img src="images/1.jpg" width="210" height="140" />
    <img src="images/2.jpg" width="210" height="140" />
    <img src="images/3.jpg" width="210" height="140" />
    <img src="images/4.jpg" width="210" height="140" />
    <img src="images/5.jpg" width="210" height="140" />
    <img src="images/6.jpg" width="210" height="140" />
    <img src="images/7.jpg" width="210" height="140" />
    <img src="images/8.jpg" width="210" height="140" />
    <img src="images/9.jpg" width="210" height="140" />
 
</div>
 
 
</body>
</html>

 

CSS CODE

?View Code 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

@charset "utf-8";
/* CSS Document */
 
body{
	padding:0;
	margin:0;
}
 
.showarea{
	width:660px;
}
 
.showarea img{
	padding:5px;
	margin:5px;
	border:1px solid black;
}
 
.gridarea{
	width:670px;
}
 
.gridarea img{
	padding:2px;
	margin:1px;
	border:1px solid black;
}

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::
  • funp
  • Hemidemi
  • YahooKimo
  • Google
  • udn
  • Haohao
  • Live

目前並無相關文章

Ausir JQuery , , , ,

  1. Ausir
    2010年2月4日18:57 | #1
    回覆 | 引用

    補充 : 這篇文章要感謝 指導顧問 男丁格爾

    請原諒我沒寫在文章內，因為有程式碼

    連結 : 男丁格爾’s 脫殼玩

  2. 壞蛋
    2010年2月4日22:57 | #2
    回覆 | 引用

    很棒很棒～～

  3. Ausir
    2010年2月5日16:14 | #3
    回覆 | 引用

    @壞蛋

    這是初級班而已啦 QQ

  4. 大鐵
    2010年2月5日16:50 | #4
    回覆 | 引用

    JQUERY 我還一直都沒有接觸呢~~
    看來好像蠻強大的耶 ^^

  5. Ausir
    2010年2月5日17:12 | #5
    回覆 | 引用

    @大鐵

    下次再來寫一些其他的 ^^

  1. 本篇文章目前尚無任何 trackbacks 和 pingbacks。