代码之家 › 专栏 › 技术社区 › Tom

悬停时的jquery灰度

jquery

Tom · 技术社区 · 14 年前

是否有人知道有一种方法,使图像灰度悬停-而不是通过创建两个独立的图像和改变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>

5 回复 | 直到 14 年前

Mottie 14 年前

Claudiu 14 年前

<canvas> 标签。另一个是非常棘手的,虽然它更跨浏览器兼容,我不知道它有多大的图像工作。这将在hover上对PHP脚本进行AJAX调用,将图像URL作为参数发送,并让PHP脚本返回灰度图像。如果你需要更多的细节,我会为你写一个简短的脚本。

Mark Redman 14 年前

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

[完全不属于此组件…]

Trufa 14 年前

顺便说一下,没有jQuery,只有css

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