鼠标悬停时的 jquery 灰度

Question

有谁知道是否有办法在悬停时使图像灰度 - 除了创建 2 个单独的图像并更改 src 之外。

谢谢

编辑 - 半工作代码...:

<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>

Answer 1

尝试其中之一(都使用 Canvas ):

1. javascript image processing library - 去饱和度
2. Desaturate tutorial