如何使用 jquery 移动鼠标时更改 div 中的图像源？

Question

我正在尝试自学如何编码（尤其是网站）。我对 html 和 css 有很好的了解，目前正在学习 js。但我知道我需要社区的帮助才能取得进步！

我想知道如何实现每次鼠标移动时多次（按顺序）更改图像源的效果？例如：http://next2nothi.ng/

经过几次搜索，我无法找到实现该目标的好的解决方案……

在此先感谢您的帮助！

Answer 1

这是一个简单的例子。因此，您需要有一个图像列表，当在特定 div 上触发鼠标移动事件时要显示这些图像，您可以从列表中随机选择一个图像并将其设置为 [=18] 的背景图像=]:

function SwapBackgroundImage(){
   var listOfImages = ['urlToimage1','urlToImage2', 'and etc'];    // so have your array
    $('#myDiv').on('mousemove',function(){
          // i am picking the first image here, but you can google how to pick a random element in an array and use that
         $(this).css('background-image', 'url(' + listOfImages[0]+ ')');
    });

}

<div id="myDiv"></div>

就是这样。

Answer 2

尝试

let list=[...Array(20)].map((x,i)=>`https://picsum.photos/150/150?image=${i}`);
let index=0;

document.addEventListener("mousemove", function(){
  document.getElementById("myImg").src = list[ ++index % list.length];  
});

<img id="myImg" width="150px" heigh="150px" >

Answer 3

你好Ted_M你不需要使用jQuery，它非常简单，你可以通过几行代码接收它，即声明一个函数，该函数将检查鼠标是否移动。

var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);

现在您需要将图像 url 更改为

document.getElementById("imageid").src="../template/save.png";

所以现在的方法是

var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
  document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);

就是这样，如果你想做与你提供的 link 相同的事情，你必须将 imageURL 存储在一个数组中。谢谢评论下来寻求任何帮助。

Answer 4

let listImageURL = ['urlToImg1.png','urlToImg2.png','..3.png', ... till how much you need];
let body = document.querySelector('body').addEventListener('mouseover',function(event){
     // take list of images
      for(let i = 0; i<=listImageURL.length-1;i++){
           event.target.style.background = `url(${listImageURL[i]})`;
       }
});

HTML:
<body>
</body>

如何使用 jquery 移动鼠标时更改 div 中的图像源？

How can I change image source in a div on mouse move with jquery?

javascript

jquery

swap

image

mousemove