非常漂亮的相冊(cè)集使用jquery制作相冊(cè)集

更新時(shí)間：2016年04月28日 14:47:52 作者：Easy-Sir

這篇文章主要為大家詳細(xì)介紹了使用jquery制作非常漂亮的相冊(cè)集，步驟詳細(xì)，細(xì)節(jié)介紹完整，感興趣的小伙伴們可以參考一下

一、簡(jiǎn)單的圖像翻滾

image-rollover常被用在交互式導(dǎo)航欄上，當(dāng)我們的鼠標(biāo)移動(dòng)到導(dǎo)航欄時(shí)，按鈕的外觀改變。例如我們以如下幾幅黑白縮略圖作為導(dǎo)航圖表，當(dāng)鼠標(biāo)移動(dòng)到指定圖標(biāo)時(shí)，圖標(biāo)變?yōu)槊髁恋牟噬珗D片。預(yù)覽如下：

該頁(yè)面的代碼十分簡(jiǎn)單，我們以此為例逐步實(shí)現(xiàn)圖像的翻滾：

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>

這段代碼十分簡(jiǎn)單。主要就是包含一個(gè)Logo部分，一個(gè)標(biāo)題和6個(gè)<a>鏈接。中間我們省略了38行中的jQuery代碼部分，下面我們逐步在其中添加代碼實(shí)現(xiàn)圖像翻滾的效果。

1、改變圖像的src屬性

我們知道顯示在Web頁(yè)面的每一個(gè)圖像都有一個(gè)src屬性，該屬性表示文件的路徑，它指向服務(wù)器上的一幅圖片。如果我們更改了該屬性的值，瀏覽器將會(huì)顯示新的圖片。對(duì)于以上代碼，我們首先可以通過(guò)each()函數(shù)獲取所有img元素的遍歷，在對(duì)應(yīng)位置添加如下代碼：

<script>
 $(document).ready(function(){
  $('#gallery img').each();
 });//end ready
</script>

我們可以通過(guò)jQuery的arrt()方法來(lái)獲取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>

后面的圖像預(yù)載入中會(huì)有這段代碼的簡(jiǎn)單分析，這里首先復(fù)習(xí)一下，attr()函數(shù)允許讀取一個(gè)標(biāo)簽的指定html屬性值，如上例中傳入的'src'參數(shù)即讀取圖片的src屬性。如果給attr()方法傳入第二個(gè)參數(shù)，則可以重設(shè)該屬性的值。比如：

$('#pic1').attr('src', 'images/newImg.jpg');

另外，attr()函數(shù)也允許我們一次修改多個(gè)HTML屬性值。比如，當(dāng)我們需要載入的newImg和oldImg尺寸不符的時(shí)候，為了避免新圖片的扭曲，我們可以同時(shí)更改img元素的寬、高屬性。方法如下，傳入一個(gè)對(duì)象直接量作為參數(shù)：

var newImg = new Image();
newImg.src = 'images/newImage.jpg';
$('#pic1').attr({
  src: newImg.src,
  width: newImg.width,
  height: newImg.height
});

2、圖像預(yù)載入

如果我們不加”心機(jī)”地在鼠標(biāo)移動(dòng)到指定圖片時(shí)改變圖像的src屬性來(lái)實(shí)現(xiàn)image-rollover，會(huì)有一個(gè)小問題。當(dāng)我們把鼠標(biāo)移動(dòng)到指定圖標(biāo)上時(shí)，該圖像的src屬性被改變，此時(shí)瀏覽器會(huì)去新的src路徑下載資源圖片，現(xiàn)場(chǎng)下載圖片往往會(huì)給用戶一個(gè)明顯的延遲感。為了克服這個(gè)惱人的問題，我們可以預(yù)先將圖片下載到瀏覽器的緩存中。

實(shí)際上，在代碼2中，我們便實(shí)現(xiàn)了圖片的預(yù)載入。代碼2中的第4行，首先獲取每幅圖片的src屬性；第5行創(chuàng)建一個(gè)新圖像；第6~7行，使用正則表達(dá)式，在舊圖像src末尾添加_h后賦給新創(chuàng)建圖像的src。例如舊圖片src為'images/blue.jpg'，將'images/blue_h.jpg'賦給新創(chuàng)建的newPic的src屬性。

代碼執(zhí)行到'newPic.src = oldSrc.replace(imgExt, ‘_h$1');'時(shí)，瀏覽器便會(huì)到指定的src去下載新圖片放在瀏覽器緩存中。此時(shí)尚未觸發(fā)鼠標(biāo)事件，我們通過(guò)在腳本開始處將需要的圖片逐一下載實(shí)現(xiàn)圖像的預(yù)載入。

3、添加hover()事件實(shí)現(xiàn)圖像rollover

在完成圖像預(yù)載入后，接下來(lái)就是給需要翻滾的圖片添加一個(gè)hover事件了。當(dāng)鼠標(biāo)移動(dòng)到指定的圖片時(shí)，圖片變?yōu)榻k麗的彩色，移走時(shí)變回黑白。我們?cè)诖a2的基礎(chǔ)上，作如下添加：

 $(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

代碼十分簡(jiǎn)單，只不過(guò)在7~14行通過(guò)this給當(dāng)前圖片添加了一個(gè)hover事件，鼠標(biāo)移入移出時(shí)改變圖片的src。此時(shí)，保存添加后的img-rollover.html，注意將需要包含的js/jquery-1.7.2.min.js以及圖片資源按照代碼中指定的路徑放置完好。大功告成，可以像預(yù)覽圖片那樣測(cè)試圖片導(dǎo)航圖片翻滾的效果了。

二、漂亮的相冊(cè)集

在實(shí)現(xiàn)圖像的翻滾之后，我們希望進(jìn)一步，當(dāng)我們點(diǎn)擊小的縮略圖的時(shí)候，能夠展現(xiàn)圖片的大圖，像一個(gè)可以翻看的相冊(cè)一樣。預(yù)覽如下：

接下來(lái)我們?cè)趯?shí)現(xiàn)了小圖翻滾的代碼1的基礎(chǔ)上，增添相冊(cè)集的功能。

1、為什么要把img放在鏈接中

可能有人不理解，為什么要把img分別包含在<a>鏈接中。實(shí)際上這是一種無(wú)干擾的JavaScript技術(shù)，如果你的瀏覽器關(guān)閉了JavaScript，這里將圖像包含在一個(gè)鏈接中，當(dāng)用戶點(diǎn)擊小圖的時(shí)候，同樣會(huì)訪問到大圖文件。只不過(guò)是通過(guò)鏈接的方式，單擊鏈接時(shí)會(huì)退出當(dāng)前Web頁(yè)面并根據(jù)鏈接載入大圖文件。如下圖所示：

以上是為關(guān)閉了JavaScript的用戶準(zhǔn)備的。然而在通常情況下，對(duì)于使用JS的訪問者，我們希望單擊小的縮略圖的時(shí)候在頁(yè)面上呈現(xiàn)該圖的大圖，而不是鏈接到另一個(gè)頁(yè)面。一般情況下，單擊一個(gè)鏈接會(huì)使Web瀏覽器載入鏈接指向的內(nèi)容，所以此處第一步我們需要做的就是阻止瀏覽器在單擊圖片鏈接的時(shí)候跳轉(zhuǎn)頁(yè)面。我們使用事件的preventDefault()方法來(lái)阻止事件的常規(guī)行為，添加如下代碼：

 $(document).ready(function(){
  ...//省略未改動(dòng)部分

  $('#gallery a').click(function(evt){
   evt.preventDefault();
  });//end click

 });//end ready

添加的代碼為鏈接添加單擊事件，單擊鏈接時(shí)，通過(guò)事件的preventDefault()方法阻止了事件的常規(guī)行為。此時(shí)我們?cè)僭陧?yè)面單擊圖片鏈接的時(shí)候，瀏覽器便不會(huì)跳轉(zhuǎn)到大圖頁(yè)面了。當(dāng)然，對(duì)于沒有JavaScript的瀏覽器依然會(huì)實(shí)現(xiàn)跳轉(zhuǎn)，因?yàn)殛P(guān)閉是通過(guò)JavaScript來(lái)完成的。

2、單擊縮略圖在頁(yè)面呈現(xiàn)大圖

為了顯示大圖，我們?cè)谏厦娲a基礎(chǔ)上添加一個(gè)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>

接下來(lái)，我們通過(guò)jQuery為要顯示的大圖創(chuàng)建一個(gè)img標(biāo)簽，在代碼3中添加如下代碼：

  ...//省略未改動(dòng)部分

  $('#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行，首先通過(guò)attr()函數(shù)獲取<a>的href屬性，即鏈接地址imgPath；第6行根據(jù)該連接地址創(chuàng)建一個(gè)img標(biāo)簽，將該標(biāo)簽的src屬性賦值為imgPath；第7行，首先將圖片隱藏，后面將通過(guò)淡入的方式華麗出現(xiàn)；第8行將img標(biāo)簽添加到<div id="bigImg"></div>中，如果沒有第7行的隱藏操作，此時(shí)圖像會(huì)立即出現(xiàn)；第9行，使用淡入的方式顯示圖像。OK，保存代碼，在瀏覽器中打開，點(diǎn)擊縮略圖，發(fā)現(xiàn)已經(jīng)有了相冊(cè)查看效果了，但是，當(dāng)我們連續(xù)點(diǎn)擊相冊(cè)圖片的時(shí)候，歷史圖片并不會(huì)消失，如果我們一直點(diǎn)擊下去，圖片會(huì)一直羅列。如下圖所示：

實(shí)際上，每當(dāng)我們點(diǎn)擊一個(gè)縮略圖的時(shí)候，代碼都會(huì)為我們創(chuàng)建一個(gè)新的img并添加到<div id="bigImg"></div>中，從DOM的角度看，會(huì)不停地增加子節(jié)點(diǎn)：

為了實(shí)現(xiàn)”相冊(cè)”翻閱的效果，我們?cè)陲@示新的相片的時(shí)候同時(shí)要把之前的圖片刪掉。繼續(xù)在代碼5中作如下添加：

  ...//省略未改動(dòng)部分

  $('#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行首先獲取當(dāng)前存在的圖像oldImg，在新的圖片淡入的時(shí)候，此圖應(yīng)該進(jìn)行淡出處理。11~13行，在新的圖片淡入之后，oldImg淡出。同時(shí)給fadeOut函數(shù)傳入一個(gè)回調(diào)函數(shù)，在oldImg淡出之后一并移除該圖像的img標(biāo)簽。這樣我們就保證在DOM樹中<div id="bigImg"></div>始終只有一個(gè)img節(jié)點(diǎn)，而不會(huì)無(wú)限地增長(zhǎng)下去。

接下來(lái)進(jìn)行一些細(xì)節(jié)的調(diào)整，當(dāng)我們點(diǎn)入這個(gè)頁(yè)面的時(shí)候，希望默認(rèn)顯示第一幅圖片，為了實(shí)現(xiàn)這個(gè)小功能，我們只需要在代碼6后面添加一行代碼：

  ...//省略未改動(dòng)部分

  $('#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();

我們?cè)诤竺嫣砑恿?('#gallery a:first').click();，在jQuery中，如果沒有給事件函數(shù)傳遞任何參數(shù)，jQuery便會(huì)觸發(fā)一次該事件。保存代碼，重新用瀏覽器打開，第一幅圖片已經(jīng)默認(rèn)顯示了：

3、css絕對(duì)定位實(shí)現(xiàn)圖片的重疊

漂亮的相冊(cè)集基本上已經(jīng)完成了，但是吹毛求疵地看，當(dāng)我們更換要查看的照片的時(shí)候，舊圖片的淡出會(huì)在新圖的后面完成，給人一種贅余不利落的感覺：

為了解決這個(gè)問題，我們讓新圖的淡入和舊圖的淡出重疊顯示。為了實(shí)現(xiàn)圖片的重疊顯示我們需要用到css的絕對(duì)定位。

通常情況下，在隱藏或者添加一個(gè)新的元素的時(shí)候，其他元素會(huì)像流一樣自動(dòng)移動(dòng)來(lái)填補(bǔ)空白或者給新的元素騰位置。但是像我們本文的示例，如果我們不希望看到這樣的效果，我們可以使用css的絕對(duì)定位。css的絕對(duì)定位會(huì)把一個(gè)元素放置在常規(guī)頁(yè)面內(nèi)容流之外，這樣就不會(huì)在內(nèi)容流中出現(xiàn)填補(bǔ)移動(dòng)等操作了。如果我們使用絕對(duì)定位將元素定位在相同的位置，那么元素將會(huì)重疊在一起。本例中，這恰恰是我們想要的。實(shí)現(xiàn)起來(lái)其實(shí)十分簡(jiǎn)單，只需要在css中將<div id="bigImg"></div>中的img指定為絕對(duì)定位就可以了。我們?cè)诖a1的</style>前添加以下代碼：