0

如何在 JQuery 代码中引用我的文件夹中的图像？

我想将图像转换为灰度，在鼠标悬停时恢复为彩色。但是，我的图像引用不起作用。我已经尝试过通常的（'folderofimages/myimage'），但这不起作用。我已经尝试了建议的方式（'.myimage folderofimages'），但这也不起作用。

这是提供代码的网站，http://webdesignerwall.com/tutorials/html5-grayscale-image-hover/comment-page-4#comments

这是我的代码，

<script src="jquery.min.js" type="text/javascript"></script>
// On window load. This waits until images have loaded which is essential
$(window).load(function () {
    // Fade in imagimages/homeannual.jpeges so there 
    // isn't a color "pop" document load and then on window load
    $("images.homeannual").fadeIn(500);
    // clone image
    $('images.homeannual').each(function () {
        var el = $(this);
        el.css({
            "position": "absolute"
        }).wrap("<div class='img_wrapper' style='display: inline-block'>")
          .clone().addClass('img_grayscale')
          .css({
            "position": "absolute",
            "z-index": "998",
            "opacity": "0"
        }).insertBefore(el).queue(function () {
            var el = $(this);
            el.parent().css({
                "width": this.width,
                "height": this.height
            });
            el.dequeue();
        });
        this.src = grayscale(this.src);
    });

    // Fade image 
    $('images.homeannual').mouseover(function () {
        $(this).parent().find('img:first').stop().animate({
            opacity: 1
        }, 1000);
    })
    $('.img_grayscale').mouseout(function () {
        $(this).stop().animate({
            opacity: 0
        }, 1000);
    });
});

// Grayscale w canvas method
function grayscale(src) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for (var y = 0; y < imgPixels.height; y++) {
        for (var x = 0; x < imgPixels.width; x++) {
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] +
               imgPixels.data[i + 1] +
               imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}
4

2 回答 2

1

大卫有正确的答案，但在旁注中，您可以使用 css 更轻松地做到这一点！通过这种方式，您将节省大量时间，并且手头的维护工作更少！

只需使用

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

从那里您可以添加过渡以获得与示例相同的效果。

有关详细信息，请参阅http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html ！

于 2013-09-16T23:30:28.880 回答
1

如果您更改所有参考

$("images.homeannual")

至

$('img.homeannual')

该代码实际上有效。显然在您要处理的图像具有类的条件下homeannual，例如

<img src="1.gif" class="homeannual">
于 2013-09-13T00:22:01.803 回答