懸停對圖像的影響（jQuery的/ JavaScript的）

Question

我想要一個類似的懸停效果作爲本網站的頭版圖像：http://www.arken.dk/default.aspx 我做了懸停效果的HTML和CSS，但由於懸停類只適用於一圖像一次，位置的變化將只針對一個圖像。 據我所見，只需要一張圖片就可以改變所有圖片的CSS。 此外，它不應該只是一個懸停效果。在網站上，即使圖像不再徘徊，圖像的位置仍然保持不變？

任何人知道如何做到這一點，或者可能有一個指南等鏈接？

林不知道這種效應被稱爲所以我還沒有能夠找到什麼有用的東西在谷歌:(

感謝提前:)

Answer 1

您可以使用jQuery Accordion來做到這一點。

Answer 2

例如從YUI庫中的一個組成部分：http://yuilibrary.com/gallery/show/accordion-horiz-vert

Answer 3

下載jQuery和使用它...

$(#'image need to be hovered').mouseover(function() 
{ 
    $(#'images need be be cahnged in this effect').attr('src','image path') 
}) 

例如：給ID爲DIV作爲IMG1和需要改變的圖像是IMG1，IMG2，IMG3

考慮這個

$('#img1').mouseover(function() 
    { 
     $('#img1').attr('src','image path for hover image'); 
     $('#img2').attr('src','image path for hover image'); 
     $('#img3').attr('src','image path for hover image'); 
    }); 

和鼠標移開

$('#img1').mouseout(function() 
     { 
      $('#img1').attr('src','image path for original image'); 
      $('#img2').attr('src','image path for original image'); 
      $('#img3').attr('src','image path for original image'); 
     }); 

Answer 4

工作實施例：http://jsfiddle.net/SBpzX/2/

<div id="container"> 
    <div class="text">one</div> 
</div>  

JS

$(document).ready(function() { 
    $('.text').hide(); 
    $('img').animate({ 
     opacity:1 

    }); 

    $('img').hover(function() { 
     $(this).stop().animate({opacity:.4},200); 
     $('.text').fadeIn(); 

    }, function() { 
     $(this).stop().animate({opacity:1},500) 
     $('.text').fadeOut(); 
    }); 


}); 

CSS

img 
{  
    position:absolute; 
    left:0; 
    top:0; 
} 

#container { 
    width: 400px; 
    height: 267px; 
} 

.text { 
    color: black; 
    position: relative; 
    text-align: center; 
    top: 50%; 
    font-family: Arial, Verdana; 
    color: #000; 
    font-size: 5em; 
    font-weight: bold; 
    text-shadow: 1px 1px #fff; 
}