做圖像翻轉的最佳方法？

Question

我希望我的主標誌在鼠標移動時發生變化。

我知道有幾種方法可以實現這一點，並且想知道穩定性，瀏覽器兼容性，效率以及設置的簡易性的最佳方法。

我發現一些方法是：

• 的Javascript（jQuery的）更換 「src」 屬性的。
• 使用CSS背景和 「懸停」

還有嗎？ 什麼是最好的？

Answer 1

底線

對於內容-FUL圖片，你想在HTML標記的src。您想要使用Javascript解決方案並將翻轉圖像放入屬性中。

對於無內容圖片的UI元素，尤其是那些在網站中很常見或重複的元素，直接的CSS解決方案將是最好的（因此您不必在每次調用時重新聲明圖像位置）。在CSS解決方案中，精靈是最好的，因爲它們不需要預加載開銷。

JavaScript解決方案

HTML：

<img src="/img/one.jpg" data-rollover="/img/two.jpg" /> 

在jQuery中：

$(function(){ 
    $('img.rollover').hover(function(){ 
    var e = $(this); 
    e.data('originalSrc', e.attr('src')); 
    e.attr('src', e.attr('data-rollover')); 
    }, function(){ 
    var e = $(this); 
    e.attr('src', e.data('originalSrc')); 
    }); /* a preloader could easily go here too */ 
}); 

樣品實施：http://jsfiddle.net/dtPRM/1/

優點：這很容易;這說得通;一旦你建立了你的圖書館，它可以用最少的附加標記工作。

缺點：需要Javascript和開銷加載jQuery庫。

可能是最好的選擇。如果您的用戶在翻轉相關的情況下使用瀏覽器（可能是這種情況），他們具有運行此選項的Javascript功能。由於某種原因，故意將Javascript關閉的人可能會想到，如果您留下一點點<noscript>說明，他們可能無法獲得完整的功能集。

CSS的解決方案：最佳

HTML：

<div id="img1" /> 

CSS：

div#img1 { 
    height: 400px; 
    width: 300px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-position: top right;} 

樣品實施：http://jsfiddle.net/dtPRM/5/

就個人而言，我認爲對於內容FUL圖像，這是比CSS +兩個背景圖片soluti更糟糕的選擇上。您將HTML標記與顯示語義值分開。

但是，如果您使用的是像UI元素這樣的無內容圖片，那麼在我看來這是最好的解決方案。

CSS的解決方案：還行吧

另一個CSS選項可用，不涉及背景圖片（CSS的解決方案中是優選的，如果你想擁有在HTML圖像標記，如對語義上有意義的圖像） 。

<div class="rollover"> 
    <img class="rollover" src="http://dummyimage.com/600x400/000/fff" /> 
    <img class="" src="http://dummyimage.com/600x400/fff/000" /> 
</div> 

CSS（我在這裏使用了:not僞選擇，但它是很容易避免使用它，我也覺得我得到的類名語義向後）：

div.rollover img:not(.rollover) {display: none;} 
div.rollover:hover img:not(.rollover) {display: inline;} 
div.rollover:hover img.rollover {display: none;} 

樣品實現：http://jsfiddle.net/dtPRM/2/

優點：與以前的CSS解決方案相比，語義上明智的將所有信息放在樣式表中。

缺點：需要額外的標記。

評論：根據瀏覽器是否需要，可以自動預加載這一個。

底線：如果因爲絕對需要IE2兼容性或非JS支持而無法使用選項（1）

的CSS unsolution：滾開

我提到這一點，只是因爲你在問題中提到它。我不會使用它。

HTML：

<div id="img1" /> 

CSS：

div#img1 { 
    height: 400px; 
    width: 600px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-image: url('http://dummyimage.com/600x400/fff/000');} 

樣品實施：http://jsfiddle.net/dtPRM/4/

優點：廣泛兼容;你真正需要支持的是背景圖像和懸停。

缺點：語義上怪異的把圖像放在CSS中並集中在那裏。使未來的修改更加困難。也就是說，如果你有一個保證翻轉圖像的場景，它很可能是一個非內容圖像（例如，一個UI元素），在這種情況下，CSS可能會在語義上（可能）比正規形象。請參閱下面的精靈註釋。

其他方面的不足：你必須要小心申報圖像的高度和寬度（一個很好的做法，無論如何，但它可能會很麻煩，當你只想把事情做好）。在移動瀏覽器上查看可能會異常處理CSS背景圖像的用戶。

更弊端：如果要疊加在它上面預加載，你將可以使用JavaScript和莫名其妙地選擇傾倒能元素，按照這個速度，你不妨使用JavaScript爲了一切。

底線：不要爲內容FUL圖像使用。如果您必須遠離Javascript，請使用用於UI元素的精靈和用於語義上有意義的圖像的備用解決方案。

Answer 2

您應該使用:hover CSS規則。

Answer 3

CSS遠。儘管您可能想用JavaScript預緩存圖像。使用「精靈」 List a part - sprites CSS

Answer 4

圖像翻轉兩個圖像組合成一個，然後使用CSS :hover到圖像偏移。

使用CSS的一個優點是，即使關閉了JavaScript，它也能正常工作。

使用單個圖像的一個優點是它可以避免額外的HTTP請求。

參見：http://css-tricks.com/css-sprites/

工具，以幫助生成圖像和CSS：

• http://csssprites.com/
• http://css-sprit.es/

Answer 5

CSS使用背景和「懸停」

使用CSS子畫面，換句話說

Answer 6

$('#div1').hover(function(){ 
    this.style.color='white'; 
},function(){ 
this.style.color='black; 
}); 

或

$('#div1').onmouseover()... 
$('#div1').onmouseout()... 

Answer 7

#btn{ 
width:100px; height:100px;/*the dimensions of your image*/ 
background:url(bird.png) left top no-repeat; 
} 
#btn:hover{ 
background-position:left bottom;/* pixel references can be used if prefered */ 
} 

使用圖像像這樣：

注：避免JS圖像替換爲您將承擔很短的圖像加載時間，如果圖像不前緩存。

希望這有助於兄弟！

W.

Answer 8

使用CSS精靈和：懸停僞類CSS。這裏的原因：

1. 交換或者通過JS或通過CSS圖像源將導致，而新的圖像通過瀏覽器下載的第一個鼠標在「閃爍」。如果你使用精靈，它只是一個改變位置的圖像，所以不要眨眼。

2. 單個圖像可減少HTTP請求，從而使網站加載速度更快。

3. 它適用於用戶禁用JavaScript的情況。

4. 它受到所有瀏覽器類型（桌面，反正，沒有：懸停狀態的手機瀏覽器不支持此功能）的支持。

的更多信息：http://css-tricks.com/css-sprites/