欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

非常漂亮的相冊集 使用jquery制作相冊集

 更新時間：2016年04月28日 14:47:52   作者：Easy-Sir  
這篇文章主要為大家詳細介紹了使用jquery制作非常漂亮的相冊集，步驟詳細，細節(jié)介紹完整，感興趣的小伙伴們可以參考一下

一、簡單的圖像翻滾

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

該頁面的代碼十分簡單，我們以此為例逐步實現(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>

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

1、改變圖像的src屬性

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

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

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

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

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

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

2、圖像預(yù)載入

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

實際上，在代碼2中，我們便實現(xiàn)了圖片的預(yù)載入。代碼2中的第4行，首先獲取每幅圖片的src屬性；第5行創(chuàng)建一個新圖像；第6~7行，使用正則表達式，在舊圖像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');'時，瀏覽器便會到指定的src去下載新圖片放在瀏覽器緩存中。此時尚未觸發(fā)鼠標(biāo)事件，我們通過在腳本開始處將需要的圖片逐一下載實現(xiàn)圖像的預(yù)載入。

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

在完成圖像預(yù)載入后，接下來就是給需要翻滾的圖片添加一個hover事件了。當(dāng)鼠標(biāo)移動到指定的圖片時，圖片變?yōu)榻k麗的彩色，移走時變回黑白。我們在代碼2的基礎(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

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

二、漂亮的相冊集

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

接下來我們在實現(xiàn)了小圖翻滾的代碼1的基礎(chǔ)上，增添相冊集的功能。

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

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

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

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

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

 });//end ready

添加的代碼為鏈接添加單擊事件，單擊鏈接時，通過事件的preventDefault()方法阻止了事件的常規(guī)行為。此時我們再在頁面單擊圖片鏈接的時候，瀏覽器便不會跳轉(zhuǎn)到大圖頁面了。當(dāng)然，對于沒有JavaScript的瀏覽器依然會實現(xiàn)跳轉(zhuǎn)，因為關(guān)閉是通過JavaScript來完成的。

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

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

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

為了實現(xiàn)”相冊”翻閱的效果，我們在顯示新的相片的時候同時要把之前的圖片刪掉。繼續(xù)在代碼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行首先獲取當(dāng)前存在的圖像oldImg，在新的圖片淡入的時候，此圖應(yīng)該進行淡出處理。11~13行，在新的圖片淡入之后，oldImg淡出。同時給fadeOut函數(shù)傳入一個回調(diào)函數(shù)，在oldImg淡出之后一并移除該圖像的img標(biāo)簽。這樣我們就保證在DOM樹中<div id="bigImg"></div>始終只有一個img節(jié)點，而不會無限地增長下去。

接下來進行一些細節(jié)的調(diào)整，當(dāng)我們點入這個頁面的時候，希望默認顯示第一幅圖片，為了實現(xiàn)這個小功能，我們只需要在代碼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中，如果沒有給事件函數(shù)傳遞任何參數(shù)，jQuery便會觸發(fā)一次該事件。保存代碼，重新用瀏覽器打開，第一幅圖片已經(jīng)默認顯示了：

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

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

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

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

#bigImg img {
  position: absolute;
}

保存，重新用瀏覽器打開，大功告成！漂亮的相冊已經(jīng)做好了。

jquery文件下載

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。

相關(guān)文章

最新評論