使用JavaScript將灰度縮略圖圖像淡入色

我對web開發相對陌生，甚至不知道從何處着手編寫JavaScript，將灰度縮略圖圖像淡化爲鼠標懸停時的顏色縮略圖圖像，反之亦然mouseoff（< - 或無論這被稱爲）。使用JavaScript將灰度縮略圖圖像淡入色

我已經找遍了，找不到一個腳本來做到這一點。這可能嗎？我可以使用jQuery來做到這一點嗎？其他想法？

非常感謝您的幫助！

2009-08-09 BeachRunnerFred

我認爲你所能做的就是一次性將兩個縮略圖加載到一個容器中，黑色和白色放置在顏色上方。然後，您可以使用jquery將縮略圖的不透明度淡化爲0.0。這裏是一個工作示例（它只是使用一個點擊一次改變它，但我會離開鼠標懸停/鼠標移開你 - 你可能要加快動畫）：

一些HTML代碼：

<div class="container"> 
    <img src="blackandwhite.jpg" class="bw" /> 
    <img src="colour.jpg" class="colour" /> 
</div>

一些CSS：

.container { position: relative; } 
.container img { position: absolute; } 
.bw { z-index: 101; } 
.colour { z-index: 100; }

一些jQuery的：

$(function() { 
    $(".bw").click(function() { 
     $(this).animate({ opacity: 0.0 }, 800); 
    }); 
});

來源

2009-08-09 22:13:33 ScottE

謝謝，scottE，這聽起來很有希望。我會玩它。 – BeachRunnerFred 2009-08-09 22:22:19

我決定給你一個工作的例子。試過了 - 對我來說工作得很好。 – ScottE 2009-08-09 22:24:11

優秀，它的作品！非常感謝！ – BeachRunnerFred 2009-08-09 23:03:48

做到這一點，最好的辦法是實際有兩個版本的圖像。一個是灰度的，一個是彩色的。爲了嚴格遵守javascript和html，我不相信除了使用這兩種圖像方法之外，還有別的辦法。 Flash，Silverlight甚至HTML 5都可以輕鬆完成。

來源

2009-08-09 22:14:12 MunkiPhD

你真的想淡入淡出嗎？

通常情況下，交換是通過CSS

<a class="btn"></a>

和CSS

a.btn { 
    background: url(../images/button-image.png) no-repeat 0 0; 
    width: 110px; 
    height: 16px; 
    margin: 10px 0 0; 
} 
a.btn:hover { 
    background-position: 0 -16px; 
}

在這種情況下有一個小的性能提升會在哪裏按鈕圖像包含兩個圖像垂直堆疊，而做CSS是背景圖片的滑動，但它是相同的想法。這是一個性能增強，因爲瀏覽器只需要下載1個圖像，而不是2.

來源

2009-08-09 22:18:57

使用JavaScript將灰度縮略圖圖像淡入色

回答

相關問題