jQuery的圖像幻燈片

Question

這裏是測試頁面

http://www.studioteknik.com/html/test-portfolio.html

我沒有錯誤，但沒有懸停滑動效果...

任何線索的人？

---

更新，MOLF有解決這個問題，這是沒有的伎倆絕對位置..但是，現在，當文本顯示，該鏈接的下面是不是CLIKABLE

---

的修正頁面是在這裏：http://www.studioteknik.com/html/test-portfolio3.html

Answer 1

你應該更新你的CSS，確保.image img絕對定位：

.image img { 
    position: absolute; // added 
    height: 100%; 
    width: 100%; 
} 

這將使幻燈片工作。不過，該圖像將顯示在周圍的div之外。爲了解決這個問題，一個overflow: hidden屬性添加到.image：

.image { 
    // ... 
    overflow: hidden; // added 
} 

---

更新：鑑於上面你最終文本背後的.image div（即非可點擊鏈接）的解決方案，你最好滑動即而不是圖片。取而代之的是上面，請執行下列操作：

.box { 
    // ... 
    overflow: hidden; // added 
} 

而在你的javascript：

$('div.box').hover(function() { 
    $(this).find(".image").animate({top:'200px'},{queue:false,duration:500}); 
}, function() { 
    $(this).find(".image").animate({top:'0px'},{queue:false,duration:500}); 
}); 

注意，我們現在跟蹤的div.box的hover事件，滑下div.image。

Answer 2

它與

position:relative; 

還，但你必須改變你的JS到：

$('div.webpreview').hover(....); 

，因爲在你的頁面類 「形象」 不派息:)

點擊鏈接：

STYLE：

.webpreview img { 
    height: 100%; 
    position:relative; 
    overflow:hidden; 
    width: 100%; 
    z-index:100;//note this 
} 

.box .linkDiv{ 
     top:-300px; 
     position:absolute; 
     overflow:hidden; 
     z-index:200; 
} 

JS：

$(document).ready(function() { 
$('div.box').hover(
     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'200px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).animate({top:'0px'}, 
         {queue:false, duration:500}); 
     }, 

     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'0px'},{queue:false,duration:1000}); 
      $("div.linkDiv",$(this)).animate({top:'-300px'}, 
         {queue:false, duration:500}); 
     } 
     ); 
}); 

HTML：

<div class="box"> 
<div class="linkDiv"> 
    <strong>Client :</strong> Sous le charme des érables<strong><br> 
     Manda : </strong>Conception et réalisation<br> 
     <strong>Adresse : <a href="http://www.souslecharme.ca/" 
      target="_blank">www.souslecharme.ca</a></strong> 
</div> 
    <div class="webpreview"><img src="test-portfolio_files/souslecharme.jpg"></div> 
</div> 

你也可以改變含有鏈接的z-index DIV的做到這一點：

 $('div.box').hover(
     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'200px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).css("z-index","200"); 
     }, 

     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'0px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).css("z-index","50"); 
     });