懸停上的jquery灰度

沒有人知道是否有辦法在懸停時創建圖像灰度 - 除了創建2個獨立的圖像和更改src。懸停上的jquery灰度

感謝

編輯 - SEMI的工作代碼...：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="scripts/pixastic-1.custom.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var img = $(".test img") 

    $('.test').hover(function() { 
     $('img', this).pixastic("desaturate"); 
    }, function() { 
     $(this).html(img); 
    }); 

}); 
</script>

和

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div>

我如何修改這個工作如果在頁面上有一個DIV ...像這樣...

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div> 

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/another_image.jpg" width="100" height="100" alt="" /> 
</div>

來源

2010-10-09 Tom

可能的解決方案：http：// stackoverflow。com/questions/2474333/jquery-convert-image-to-grayscale – Alec 2010-10-09 15:24:03

你可能想檢查這個演示： http://www.sohtanaka.com/web-design/examples/hover-over-trick/ – 2010-10-09 15:25:27

這是通過使用[兩張圖片]（http://www.sohtanaka.com/web-design/examples/hover-over-trick/sushiandrobots_thumb.gif）。 – Alec 2010-10-09 15:27:25

嘗試其中之一（B OTH用帆布）：

javascript image processing library - 去色
Desaturate tutorial

來源

2010-10-09 16:14:41 Mottie

最好的解決方案是由@Alec建議的解決方案，標記爲<canvas>。另一個非常棘手，儘管它更具跨瀏覽器兼容性，但我不知道它對於較大圖像的效果如何。這將使AJAX調用懸停在PHP腳本上，將圖像URL作爲參數發送，並讓PHP腳本返回灰度圖像。如果你需要更多的細節，我會爲你寫一個簡短的腳本。

來源

2010-10-09 15:27:23 Claudiu

作爲一種替代的jQuery但不ajdusting實際圖像源的含2個圖像，我認爲它可能使閃存內的圖像灰度用一個簡單的flash動畫，超過等

這看起來處理鼠標像物有所值：http://www.flashcomponents.net/component/as2_luminosity_gray_scale_utility.html

[不附屬於這一切的組件...]

來源

2010-10-09 15:36:41

下面是使用一種解決方案「一」的形象，作爲you'll明顯看出，它實際上是兩個圖像粘在一起，我不確定這是否有幫助，希望它有用！

BTW沒有jQuery的，只是CSS

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>

CSS：

.myButtonLink { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: url('/path/to/myImage.png') bottom; 
    text-indent: -99999px; 
} 
.myButtonLink:hover { 
    background-position: 0 0; 
}

來源：

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

來源

2010-10-09 16:09:23 Trufa

@fudgey真的很好的腳本，愛他們！你知道瀏覽器兼容性嗎？ – Trufa 2010-10-09 16:45:59

Pixastic腳本顯示它在我鏈接的頁面上具有兼容性。只是你知道，灰度/去飽和度功能內置於IE中：'img.style.filter ='progid：DXImageTransform.Microsoft.BasicImage（grayScale = 1）';' – Mottie 2010-10-11 15:46:24

@fudgey對不起！你完全正確，完全錯過了！謝謝 – Trufa 2010-10-11 16:40:34

如果Pixastic是矯枉過正，你可以試試我的簡單的jQuery插件：jquery-grayscale

你運行它想：

$('img').grayscale();

它利用了<canvas>所以它不適用於舊版瀏覽器。

來源

2011-04-28 08:24:01

懸停上的jquery灰度

回答

相關問題