效果描述：
有幾副圖片，讓他們依次疊加重合。首先顯示第一張圖片。然后鼠標懸停在上面，邊框變化。然后離開，然后第一張淡出，第二張淡入。接著懸停在第二張圖片，邊框變化，然后離開，第二張淡出，第三張淡入。以此類推。
HTML:
<a href="#" class="image"><img src="pic1.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic2.jpg" alt="" width="150" height="150"/></a> <a href="#" class="image"><img src="pic3.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic4.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic5.jpg" alt="" width="150" height="150"/></a> <a href="#" class="image"><img src="pic6.jpg" alt="" width="150" height="150" /></a>
CSS:
.image{/*設置定位屬性是決定定位，這樣才能重合。并任意定義位置，此處我定義TOP:300,LEFT:300*/position: absolute;top: 300px;left: 300px; }
jquery:
// 首先隱藏全部圖片$('.image').hide(); // 然后顯示第一張圖片，因為默認的情況是顯示最后一張圖片的。$('.image:first').fadeIn('slow');$('.image').hover(function(){ // 邊框顏色$(this).css('border','1px solid lightskyblue');}, function(){ // 獲取下一個圖片對象,如果顯示了最后一張圖片,此時其next的length為0,如果讓它從新顯示第一張圖片var next = ($(this).next().length)?$(this).next():$('.image:first');$(this).css('border',''); // 當前圖片對象淡出,此處添加stop方法,為了防止快速在圖片上懸浮出入的時候,造成動畫反復運動.stop:停止當前動畫$(this).stop().fadeOut('slow'); // 下一張圖片對象淡入next.fadeIn('slow');});
最終效果:
讀者可以自行嘗試..圖片自選
?
)
