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

尝试其中一种（都使用画布）：

javascript image processing library - 去饱和
Desaturate tutorial

Answer 2

最佳解决方案是@Alec建议的<canvas>标记。另一个是非常棘手的，尽管它更兼容跨浏览器，我不知道它对于更大的图像有多好。这将是一个AJAX调用悬停到PHP脚本，发送图像URL作为参数，让PHP脚本返回灰度图像。如果您需要更多详细信息，我会为您编写一个简短的脚本。

Answer 3

作为jQuery的替代品，但不是调整实际的图像源或有2个图像，我认为可以使用一个处理鼠标等的简单flash电影在flash中制作灰度图像。

这看起来很有价值：http://www.flashcomponents.net/component/as2_luminosity_gray_scale_utility.html

[根本不隶属于此组件...]

Answer 4

这是一个使用“one”图像的解决方案，正如你明显看到的那样，它实际上是两个图像粘在一起，我不确定这是否有帮助，希望它能做到！

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/

Answer 5

如果Pixastic对您来说太过分了，您可以尝试我的简单jQuery插件：jquery-grayscale

你运行它：

$('img').grayscale();

它使用＆lt; canvas＆gt;所以它不适用于旧浏览器。

悬停时jquery灰度

5 个答案: