jQuery的 - 黑白图像的彩色图像（悬停）

在同一个文件中我把彩色图像：

现在我想，当你将鼠标悬停在该图像上的鼠标已经从黑白到彩色改为...

我把函数的jQuery：

$("ul li").mouseover(function() { 

     $(this).find("span.thumb").hover().css({ 
      'background-position': 'center bottom' 
     }).stop().fadeTo(400, 0).show(); 

    }); 

    $("ul li").mouseout(function() { 

     $(this).find("span.thumb").hover().css({ 
      'background-position': 'center top' 
     }).stop().fadeTo(400, 1).show(); 

    });

HTML：

<span class="thumb"></span>

CSS：

ul li span.thumb {background:url(image.png) no-repeat}

问：我可以做不同呢？（当你将鼠标悬停在图像上时不会消失）。

来源

2011-04-12 Issus

你也可能想看看进入[jQuery的插件，去色（http://plugins.jquery.com/project/desaturate），它可以从一张彩色图像上即时执行此操作。 – 2011-04-12 10:25:35

喜看来，我认为你已经过稍微复杂，试试这个：

HTML

<div> 
    <img src="http://ajthomas.co.uk/flower-col.png" alt="" /> 
</div>

JQUERY

$(document).ready(function() { 
    $('div').mouseover(function(){ 
     $('img').fadeIn('slow'); 
    }); 
    $('img').mouseout(function(){ 
     $('img').fadeOut('slow'); 
    }); 
});

CSS

div{width:300px; 
    height:300px; 
    background-image:url(http://ajthomas.co.uk/flower-gs.png)} 

img{display:none;}

我编写它为你太上JSFiddle

来源

2011-04-12 10:20:18 Alex

谢谢你的提示。我做了这样的事情： http://jsfiddle.net/sAq68/ （无图像插入到HTML代码中）再次感谢。 – Issus 2011-04-12 22:18:03

喜欢它，伟大的解决方案@Craiss。很高兴我能帮上忙 – Alex 2011-04-13 08:04:53

尝试CSS精灵：http://www.alistapart.com/articles/sprites

的基本技术是两个图像结合起来，一个背景图片，并将其设置为您的HTML元素的背景。然后，当发生悬停事件时，您只能将背景图像“移动”到背景图像的彩色部分可见的位置。使用background-position css属性可以控制背景图像的哪一部分可见。

其优点是在第一次悬停时没有任何延迟，因为bw以及图像的彩色版本在加载页面时加载。

来源

2011-04-12 10:17:13 markmywords

jQuery的 - 黑白图像的彩色图像（悬停）

回答

相关问题