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

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

javascript jquery image

Javascript 如何使用jquery在鼠标移动时更改div中的图像源？,javascript,jquery,image,swap,mousemove,Javascript,Jquery,Image,Swap,Mousemove,我试着教自己如何编码（尤其是网站）。我对html和css有很好的了解，目前正在学习js。但我知道我需要社区的帮助才能取得进步我想知道如何实现每次鼠标移动时多次（按顺序）更改图像源的效果？例如：经过几次搜索，我无法找到好的解决方案，以实现这一点提前感谢您的帮助下面是一个简单的例子。因此，当在特定div上触发鼠标移动事件时，您需要有一个要显示的图像列表，您可以从列表中选择一个随机图像，并将其设置为div的背景图像： function SwapBackgroundImage(){ va

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

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

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

提前感谢您的帮助

下面是一个简单的例子。因此，当在特定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上触发鼠标移动事件时，您需要有一个要显示的图像列表，您可以从列表中选择一个随机图像，并将其设置为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]+ ')');
    });

}

就这样。

试试看

let list=[…数组（20）].map（（x，i）=>`https://picsum.photos/150/150?image=${i}`）；
设指数=0；
document.addEventListener（“mousemove”，function（））{
document.getElementById（“myImg”）.src=list[++索引%list.length]；
});
试试看

let list=[…数组（20）].map（（x，i）=>`https://picsum.photos/150/150?image=${i}`）；
设指数=0；
document.addEventListener（“mousemove”，function（））{
document.getElementById（“myImg”）.src=list[++索引%list.length]；
});
您好，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存储在一个数组中。
非常感谢。
请留言寻求帮助。您好，Ted\M您无需使用jQuery，它非常简单，您只需几行代码即可收到它，即。
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>

声明一个函数，该函数将检查鼠标是否移动
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存储在一个数组中。
非常感谢。
请留言寻求帮助。
让listImageURL=['urltimg1.png'、'urltimg2.png'、'..3.png'，…直到您需要多少]；
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>

让body=document.querySelector（'body'）。addEventListener（'mouseover'，函数（事件）{
//拍摄图像列表
对于（让i=0；ilet listImageURL=['urltimg1.png'、'urltimg2.png'、'..3.png'，…直到您需要多少]；
让body=document.querySelector（'body'）。addEventListener（'mouseover'，函数（事件）{
//拍摄图像列表
对于（让我=0；我请发布您的代码到目前为止，我们可以帮助您修复它。堆栈溢出不是代码请求站点-它在这里帮助您：）请发布您的代码到目前为止，我们可以帮助您修复它。堆栈溢出不是代码请求站点-它在这里帮助您：）这不会多次更改映像（按顺序）
这不会多次（按顺序）更改图像