一、簡單的圖像翻滾
image-rollover常被用在交互式導航欄上，當我們的鼠標移動到導航欄時，按鈕的外觀改變。例如我們以如下幾幅黑白縮略圖作為導航圖表，當鼠標移動到指定圖標時，圖標變為明亮的彩色圖片。預覽如下：
該頁面的代碼十分簡單，我們以此為例逐步實現圖像的翻滾：
img-rollover.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Rollover Images</title><style>html , body{ line-height: 1; background-color: #334873;}h1 { font-family: 'ColaborateRegular', Arial, sans-serif; }p { font-family: 'ColaborateRegular', Arial, sans-serif; color: white;}.logo { letter-spacing: -1px; color: rgb(195,151,51); text-shadow: 2px 2px 1px rgba(0,0,0,.25); font: normal 54px 'ColaborateThinRegular', Arial, sans-serif;}#gallery img { display: inline-block; margin: 10px; border: 1px solid rgb(0,0,0);}</style><script src="js/jquery-1.7.2.min.js"></script><script>$(ducument).ready();//end ready</script></head><body><div class="wrapper"><div class="header"> <p class="logo">Easy Sir</p></div><div class="content"> <div class="main"> <h1>Rollover Images</h1> <p>Mouse over the images below</p> <div id="gallery"> <a href="images/blue.jpg"><img src="images/blue.jpg" width="70" height="70" alt="blue"> </a> <a href="images/green.jpg"><img src="images/green.jpg" width="70" height="70" alt="green"> </a> <a href="images/orange.jpg"><img src="images/orange.jpg" width="70" height="70" alt="orange"> </a> <a href="images/purple.jpg"><img src="images/purple.jpg" width="70" height="70" alt="purple"> </a> <a href="images/red.jpg"><img src="images/red.jpg" width="70" height="70" alt="red"> </a> <a href="images/yellow.jpg"><img src="images/yellow.jpg" width="70" height="70" alt="yellow"></a> </div> </div></div></div></body></html>這段代碼十分簡單。主要就是包含一個Logo部分，一個標題和6個<a>鏈接。中間我們省略了38行中的jQuery代碼部分，下面我們逐步在其中添加代碼實現圖像翻滾的效果。
1、改變圖像的src屬性
我們知道顯示在Web頁面的每一個圖像都有一個src屬性，該屬性表示文件的路徑，它指向服務器上的一幅圖片。如果我們更改了該屬性的值，瀏覽器將會顯示新的圖片。對于以上代碼，我們首先可以通過each()函數獲取所有img元素的遍歷，在對應位置添加如下代碼：
<script> $(document).ready(function(){ $('#gallery img').each(); });//end ready</script>我們可以通過jQuery的arrt()方法來獲取img的src屬性。然后，我們將以上img的src屬性值替換為新圖片的路徑，方法如下：
<script> $(document).ready(function(){ $('#gallery img').each(function(){ var oldSrc = $(this).attr('src'); var newPic = new Image(); var imgExt = /(/./w{3,4}$)/; newPic.src = oldSrc.replace(imgExt, '_h$1'); }); });//end ready</script>后面的圖像預載入中會有這段代碼的簡單分析，這里首先復習一下，attr()函數允許讀取一個標簽的指定html屬性值，如上例中傳入的'src'參數即讀取圖片的src屬性。如果給attr()方法傳入第二個參數，則可以重設該屬性的值。比如：
$('#pic1').attr('src', 'images/newImg.jpg');
另外，attr()函數也允許我們一次修改多個HTML屬性值。比如，當我們需要載入的newImg和oldImg尺寸不符的時候，為了避免新圖片的扭曲，我們可以同時更改img元素的寬、高屬性。方法如下，傳入一個對象直接量作為參數：
var newImg = new Image();newImg.src = 'images/newImage.jpg';$('#pic1').attr({ src: newImg.src, width: newImg.width, height: newImg.height});2、圖像預載入
如果我們不加”心機”地在鼠標移動到指定圖片時改變圖像的src屬性來實現image-rollover，會有一個小問題。當我們把鼠標移動到指定圖標上時，該圖像的src屬性被改變，此時瀏覽器會去新的src路徑下載資源圖片，現場下載圖片往往會給用戶一個明顯的延遲感。為了克服這個惱人的問題，我們可以預先將圖片下載到瀏覽器的緩存中。
實際上，在代碼2中，我們便實現了圖片的預載入。代碼2中的第4行，首先獲取每幅圖片的src屬性；第5行創建一個新圖像；第6~7行，使用正則表達式，在舊圖像src末尾添加_h后賦給新創建圖像的src。例如舊圖片src為'images/blue.jpg'，將'images/blue_h.jpg'賦給新創建的newPic的src屬性。
代碼執行到'newPic.src = oldSrc.replace(imgExt, ‘_h$1');'時，瀏覽器便會到指定的src去下載新圖片放在瀏覽器緩存中。此時尚未觸發鼠標事件，我們通過在腳本開始處將需要的圖片逐一下載實現圖像的預載入。
3、添加hover()事件實現圖像rollover
在完成圖像預載入后，接下來就是給需要翻滾的圖片添加一個hover事件了。當鼠標移動到指定的圖片時，圖片變為絢麗的彩色，移走時變回黑白。我們在代碼2的基礎上，作如下添加：
$(document).ready(function(){ $('#gallery img').each(function(){ var oldSrc = $(this).attr('src'); var newPic = new Image(); var imgExt = /(/./w{3,4}$)/; newPic.src = oldSrc.replace(imgExt, '_h$1'); $(this).hover( function(){ $(this).attr('src', newPic.src); }, function(){ $(this).attr('src', oldSrc); } );//end hover }); });//end ready代碼十分簡單，只不過在7~14行通過this給當前圖片添加了一個hover事件，鼠標移入移出時改變圖片的src。此時，保存添加后的img-rollover.html，注意將需要包含的js/jquery-1.7.2.min.js以及圖片資源按照代碼中指定的路徑放置完好。大功告成，可以像預覽圖片那樣測試圖片導航圖片翻滾的效果了。
二、漂亮的相冊集
在實現圖像的翻滾之后，我們希望進一步，當我們點擊小的縮略圖的時候，能夠展現圖片的大圖，像一個可以翻看的相冊一樣。預覽如下：
接下來我們在實現了小圖翻滾的代碼1的基礎上，增添相冊集的功能。
1、為什么要把img放在鏈接中
可能有人不理解，為什么要把img分別包含在<a>鏈接中。實際上這是一種無干擾的JavaScript技術，如果你的瀏覽器關閉了JavaScript，這里將圖像包含在一個鏈接中，當用戶點擊小圖的時候，同樣會訪問到大圖文件。只不過是通過鏈接的方式，單擊鏈接時會退出當前Web頁面并根據鏈接載入大圖文件。如下圖所示：
以上是為關閉了JavaScript的用戶準備的。然而在通常情況下，對于使用JS的訪問者，我們希望單擊小的縮略圖的時候在頁面上呈現該圖的大圖，而不是鏈接到另一個頁面。一般情況下，單擊一個鏈接會使Web瀏覽器載入鏈接指向的內容，所以此處第一步我們需要做的就是阻止瀏覽器在單擊圖片鏈接的時候跳轉頁面。我們使用事件的preventDefault()方法來阻止事件的常規行為，添加如下代碼：
$(document).ready(function(){ ...//省略未改動部分 $('#gallery a').click(function(evt){ evt.preventDefault(); });//end click });//end ready添加的代碼為鏈接添加單擊事件，單擊鏈接時，通過事件的preventDefault()方法阻止了事件的常規行為。此時我們再在頁面單擊圖片鏈接的時候，瀏覽器便不會跳轉到大圖頁面了。當然，對于沒有JavaScript的瀏覽器依然會實現跳轉，因為關閉是通過JavaScript來完成的。
2、單擊縮略圖在頁面呈現大圖
為了顯示大圖，我們在上面代碼基礎上添加一個id為bigImg的div，如代碼4第9行：
<div id="gallery"> <a href="images/blue.jpg"><img src="images/blue.jpg" width="70" height="70" alt="blue"></a> <a href="images/green.jpg"><img src="images/green.jpg" width="70" height="70" alt="green"></a> <a href="images/orange.jpg"><img src="images/orange.jpg" width="70" height="70" alt="orange"></a> <a href="images/purple.jpg"><img src="images/purple.jpg" width="70" height="70" alt="purple"></a> <a href="images/red.jpg"><img src="images/red.jpg" width="70" height="70" alt="red"></a> <a href="images/yellow.jpg"><img src="images/yellow.jpg" width="70" height="70" alt="yellow"></a></div><div id="bigImg"><div>
接下來，我們通過jQuery為要顯示的大圖創建一個img標簽，在代碼3中添加如下代碼：
...//省略未改動部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var newImg = $('<img src="' + imgPath + '">'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); });//end click在代碼5的第5行，首先通過attr()函數獲取<a>的href屬性，即鏈接地址imgPath；第6行根據該連接地址創建一個img標簽，將該標簽的src屬性賦值為imgPath；第7行，首先將圖片隱藏，后面將通過淡入的方式華麗出現；第8行將img標簽添加到<div id="bigImg"></div>中，如果沒有第7行的隱藏操作，此時圖像會立即出現；第9行，使用淡入的方式顯示圖像。OK，保存代碼，在瀏覽器中打開，點擊縮略圖，發現已經有了相冊查看效果了，但是，當我們連續點擊相冊圖片的時候，歷史圖片并不會消失，如果我們一直點擊下去，圖片會一直羅列。如下圖所示：
實際上，每當我們點擊一個縮略圖的時候，代碼都會為我們創建一個新的img并添加到<div id="bigImg"></div>中，從DOM的角度看，會不停地增加子節點：
為了實現”相冊”翻閱的效果，我們在顯示新的相片的時候同時要把之前的圖片刪掉。繼續在代碼5中作如下添加：
...//省略未改動部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('<img src="' + imgPath + '">'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click代碼第6行首先獲取當前存在的圖像oldImg，在新的圖片淡入的時候，此圖應該進行淡出處理。11~13行，在新的圖片淡入之后，oldImg淡出。同時給fadeOut函數傳入一個回調函數，在oldImg淡出之后一并移除該圖像的img標簽。這樣我們就保證在DOM樹中<div id="bigImg"></div>始終只有一個img節點，而不會無限地增長下去。
接下來進行一些細節的調整，當我們點入這個頁面的時候，希望默認顯示第一幅圖片，為了實現這個小功能，我們只需要在代碼6后面添加一行代碼：
...//省略未改動部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('<img src="' + imgPath + '">'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click $('#gallery a:first').click();我們在后面添加了$('#gallery a:first').click();，在jQuery中，如果沒有給事件函數傳遞任何參數，jQuery便會觸發一次該事件。保存代碼，重新用瀏覽器打開，第一幅圖片已經默認顯示了：
3、css絕對定位實現圖片的重疊
漂亮的相冊集基本上已經完成了，但是吹毛求疵地看，當我們更換要查看的照片的時候，舊圖片的淡出會在新圖的后面完成，給人一種贅余不利落的感覺：
為了解決這個問題，我們讓新圖的淡入和舊圖的淡出重疊顯示。為了實現圖片的重疊顯示我們需要用到css的絕對定位。
通常情況下，在隱藏或者添加一個新的元素的時候，其他元素會像流一樣自動移動來填補空白或者給新的元素騰位置。但是像我們本文的示例，如果我們不希望看到這樣的效果，我們可以使用css的絕對定位。css的絕對定位會把一個元素放置在常規頁面內容流之外，這樣就不會在內容流中出現填補移動等操作了。如果我們使用絕對定位將元素定位在相同的位置，那么元素將會重疊在一起。本例中，這恰恰是我們想要的。實現起來其實十分簡單，只需要在css中將<div id="bigImg"></div>中的img指定為絕對定位就可以了。我們在代碼1的</style>前添加以下代碼：
#bigImg img { position: absolute;}保存，重新用瀏覽器打開，大功告成！漂亮的相冊已經做好了。
jquery文件下載
以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
