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

【问题标题】：How can I change image source in a div on mouse move with jquery?如何使用 jquery 在鼠标移动时更改 div 中的图像源？
【发布时间】：2019-02-19 13:02:04
【问题描述】：

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

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

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

提前感谢您的帮助！

【问题讨论】：

请发布您的代码，以便我们帮助您修复它。 Stack Overflow 不是代码请求站点 - 它可以帮助您:)

标签： javascript jquery image swap mousemove

【解决方案1】：

试试

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];  
});

&lt;img id="myImg" width="150px" heigh="150px" &gt;

【讨论】：

这不会改变图像multiple times (in order)

【解决方案2】：

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

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>

就是这样。

【讨论】：

【解决方案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);

就是这样，如果你想和你提供的链接一样，你必须将 imageURL 存储在一个数组中。谢谢如果有任何帮助，请发表评论。

【讨论】：

【解决方案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>

【讨论】：