jQuery的 - 黑白圖像的彩色圖像（懸停）

在同一個文件中我把彩色圖像：

現在我想，當你將鼠標懸停在該圖像上的鼠標已經從黑白到彩色改爲...

我把函數的jQuery：

$("ul li").mouseover(function() { 

     $(this).find("span.thumb").hover().css({ 
      'background-position': 'center bottom' 
     }).stop().fadeTo(400, 0).show(); 

    }); 

    $("ul li").mouseout(function() { 

     $(this).find("span.thumb").hover().css({ 
      'background-position': 'center top' 
     }).stop().fadeTo(400, 1).show(); 

    });

HTML：

<span class="thumb"></span>

CSS：

ul li span.thumb {background:url(image.png) no-repeat}

問：我可以做不同呢？（當你將鼠標懸停在圖像上時不會消失）。

來源

2011-04-12 Issus

你也可能想看看進入[jQuery的插件，去色（http://plugins.jquery.com/project/desaturate），它可以從一張彩色圖像上即時執行此操作。 – 2011-04-12 10:25:35

喜看來，我認爲你已經過稍微複雜，試試這個：

HTML

<div> 
    <img src="http://ajthomas.co.uk/flower-col.png" alt="" /> 
</div>

JQUERY

$(document).ready(function() { 
    $('div').mouseover(function(){ 
     $('img').fadeIn('slow'); 
    }); 
    $('img').mouseout(function(){ 
     $('img').fadeOut('slow'); 
    }); 
});

CSS

div{width:300px; 
    height:300px; 
    background-image:url(http://ajthomas.co.uk/flower-gs.png)} 

img{display:none;}

我編寫它爲你太上JSFiddle

來源

2011-04-12 10:20:18 Alex

謝謝你的提示。我做了這樣的事情： http://jsfiddle.net/sAq68/ （無圖像插入到HTML代碼中）再次感謝。 – Issus 2011-04-12 22:18:03

喜歡它，偉大的解決方案@Craiss。很高興我能幫上忙 – Alex 2011-04-13 08:04:53

嘗試CSS精靈：http://www.alistapart.com/articles/sprites

的基本技術是兩個圖像結合起來，一個背景圖片，並將其設置爲您的HTML元素的背景。然後，當發生懸停事件時，您只能將背景圖像「移動」到背景圖像的彩色部分可見的位置。使用background-position css屬性可以控制背景圖像的哪一部分可見。

其優點是在第一次懸停時沒有任何延遲，因爲bw以及圖像的彩色版本在加載頁面時加載。

來源

2011-04-12 10:17:13 markmywords

jQuery的 - 黑白圖像的彩色圖像（懸停）

回答

相關問題