Question

当鼠标悬停在正常图像上时，如何将正常图像变为黑白，当鼠标移出时，如何恢复正常？

Answer 1

来自http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html：

（评论我自己）

// create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width    
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y++){
     // cycle through the pixels horizontally
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          // create an average grayscale color for the pixel
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          // set the pixel to the newly created average color
          imgPixels.data[i] = avg;
          // do the same for the next two pixels
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();

此外，如果您想要“即插即用” jQuery插件为您执行此操作，请查看this jQuery plugin that desaturates the image for you。

Answer 2

这就是我看到的功能：

    $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });

     });

这将是css：

div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    }

 img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

我从这里得到了这个：http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

jQuery - 使用HTML5画布的BW效果

2 个答案: