Question

我希望更进一步，在鼠标悬停该页面上的对象时更改网页背景图像。我希望替换图像能够持续一小段时间才能立即恢复到原始状态。最重要的是，我想播放一个简短的声音文件。

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

我很乐意混合使用javascript，JQuery和CSS。

这可能吗？

TIA

布赖恩

Answer 1

以下是我所做的 working demo 。

我使用了鼠标悬停事件

$("#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();
        });

鼠标悬停时持续时间较短的背景图像

1 个答案: