javascript - 鼠标悬停时持续时间较短的更改背景图片

我想更进一步，使页面背景图像在鼠标悬停在该页面上的对象上时发生变化。我希望替换图像能持续一秒钟的时间，然后立即恢复为原始图像。最重要的是，我想播放一个简短的声音文件。

将此请求置于上下文中：我正在准备一个以摄影为主题的网站。原始背景图像将是暗的，并且将是带有照相机的摄影师的图像。将鼠标悬停在对象上时，替换图像将相同，除了相机上的明亮（纯白色）区域。这是代表闪光枪射击。因此声音文件也。

我很高兴将javascript，JQuery和CSS混合使用。

这可能吗？？

TIA

布赖恩

最佳答案

这是我所做的working demo。

我已经使用了mouseover事件，

$("#img").on("mouseover",function(){

        //code to display the image for fraction of second
        $("#img").fadeTo(1,1);
        $("#img").fadeTo(300,0.4);

    });

其中img是图像的ID。要增加/减少图像的持续时间以保持清晰，可以更改值300。

要添加枪声，您可以在上述mouseover事件中编写以下代码，

//code to play the gunshot
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'gunshot.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });

关于javascript - 鼠标悬停时持续时间较短的更改背景图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32999155/