javascript - 灰度缩放图像并引用原始图像

Question

我知道如何对图像进行灰度化。我正在使用 jquery Accordion ，并且每个 Accordion 标题上都有图像。我想在 Accordion 处于事件状态时将图像更改为灰度，并在 Accordion 不活动时将图像更改回其原始形式。我正在使用事件 AccordionChange。问题是我无法保存原始图像。请帮忙。另外，在灰度化之后，我尝试直接将原始 src 提供为

document.getElementById("imgId").src = "images/pic.jpg";

这不起作用。

Answer 1

如果您使用 jquery ui Accordion，这里就是答案:

//please note these are global variables
var imageArr=[];
var oldIndex = false;
var oldSrc;
$(document).ready(function(){

//grab all heading images 
imageArr = $("#accordion h3 img");

$( "#accordion" ).accordion({
    change: function(event, ui) { 
        active = ui.options.active;


        //restore clicked image
        if (oldIndex!==false) {
            $(imageArr[oldIndex]).attr("src",oldSrc);
        }

        //save current index for the future
        oldIndex = active;
        //save original src for the future
        oldSrc = $(imageArr[active]).attr("src")
        //implement some logic here to choose grayscale image and set the src value 
        $(imageArr[active]).attr("src","grayscale.png");
    }
});

})