2011-08-18 54 views
0

有沒有人有一個基於jQuery的照片選擇器的例子?這是你在小相冊中看到的東西。jquery圖片選擇器

我有以下代碼:

<div><img class="bigpicture" src="1.jpg"></img></div> 
<div> 
    <img class="smallpicture" src="1.jpg"></img> 
    <img class="smallpicture" src="2.jpg"></img> 
    <img class="smallpicture" src="3.jpg"></img> 
    <img class="smallpicture" src="4.jpg"></img> 
    <img class="smallpicture" src="5.jpg"></img> 
    <img class="smallpicture" src="6.jpg"></img> 
</div> 

我要找的行爲是當用戶將鼠標懸停在任一個小圖片,它更新與剛徘徊在一個更大的圖片。

有什麼想法?

感謝

+1

http://tinyurl.com/cw8e5f –

回答

1

使用jQuery:

$('.smallpicture').hover(function() { 
    $('.bigpicture').attr('src', $(this).attr('src')); 
}); 
2
$('.smallpicture').hover(function(){ 
    var theSrc = $(this).attr('src'); 
    $('.bigpicture').attr('src', theSrc); 
}); 
4
$('.smallpicture').hover(function(){ 
    $('.bigpicture').attr('src', $(this).attr('src')+"?timestamp=" + new Date().getTime()); 
}); 

timestamp需要來動態更新你的大圖像。

+1

因爲否則圖片已被緩存 –

+1

認爲這應該被標記爲答案...... – rickyduck

+0

爲什麼你強制重新加載圖像?爲什麼你要避免緩存? –