Question

如何在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();
}

Answer 1

如果您更改了所有参考文献

$("images.homeannual")

到

$('img.homeannual')

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

<img src="1.gif" class="homeannual">

Answer 2

David有正确的答案，但是在旁注中你可以用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了解详情！

在代码中发出引用图像的问题

2 个答案: