javascript - 如何随机更改 mousemove 上的图像源？

Question

当用户在 div 内移动鼠标约 100px 时，我尝试随机更改图像的来源。我只想更新源，而不是将图像堆叠在一起或将它们设置为 display:block 或 display:none 等。

Here is an example网站加载后，请务必单击查看示例。

到目前为止我有以下 HTML

<div class="header-image-inner">
    <img src="img/image-01.png" alt="" />
</div>

$(".header-image-inner").mousemove(function (event) {
    $(".header-image-inner img").attr('src', 'image-02.png');
    $(".header-image-inner img").attr('src', 'image-03.png');
    $(".header-image-inner img").attr('src', 'image-04.png');
});

Answer 1

我已经制作了相同的工作演示。 jsfiddle demo

HTML

<div class="header-image-inner">
    <img src="https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60" alt="" />
</div>

JS

$(document).ready(function(){
    var images = [
        "https://images.unsplash.com/photo-1518127864129-8d0834d765bc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5acdfad29e7fef07a86e6174e3b1d73c&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1518065336951-d16c043900d6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05f800ba4e6c18a40a8f7cf12cdd2c35&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60"
    ];
    var currentX = 0, currentY = 0;
    $('.header-image-inner').mousemove(function(e){
        if(Math.abs(currentX-e.pageX) > 50 || Math.abs(currentY-e.pageY) > 50){
            currentX = e.pageX;
            currentY = e.pageY;
            $('.header-image-inner img').attr('src',images[Math.floor(Math.random()*images.length)]);
        }
    })
})

该代码是不言自明的。我希望它有帮助。