Javascript 在jquery中移动鼠标时添加不同的图像

我正在尝试制作一个jquery代码，当您移动鼠标时，可以在其中显示不同的图像（1-3个不同的图像）

这些图像将位于光标旁边，它们将仅显示1-3，不超过1-3。每次鼠标移动，这些图像都会改变

我现在把它作为我的html代码

  <div class="mainbody">
    <section class="container">
      <div class="img_div">
      </div>
    </section>
  </div>

我的jquery代码如下所示：

let img_array = ['./img/awards_icon.png', './img/norinuri_icon.png'];
  $("div.mainbody").mousemove(function(e) {
    for(i=0; i<img_array.length; i++){
      $('.img_div').append("<img src='" + img_array[i] +"'/>");
      $('.img_div').fadeIn("5000");
      $('.img_div').finish().fadeOut("5000");
      $('.img_div').offset({
        left: e.pageX,
        top: e.pageY + 20
      });
    }
  });

让img_数组=['./img/awards_icon.png'，'./img/norinuri_icon.png']；
$（“div.mainbody”）.mousemove（函数（e）{
对于（i=0；i”）；
美元（'img_div'）.fadeIn（“5000”）；
$（'.img_div'）.finish（）.fadeOut（“5000”）；
$（'.img_div'）。偏移量({
左：e.pageX，
顶部：e.pageY+20
});
}
});

当鼠标移动时，jquery数组中的2个图像会出现，但这些图像不是只有2个图像，而是连续添加，不会停止。 所以每次我移动鼠标时，图像都会无限地添加

我肯定会在jquery数组中添加更多图像，

---

但是，我应该如何只添加两个图像，并在移动鼠标时更改这些图像呢？

使用

背景图像

var imageArr=[”https://www.w3schools.com/css/paper.gif","https://www.w3schools.com/css/gradient_bg.png","https://www.w3schools.com/css/img_tree.png"];
var计数=0；
$（“.mainbody”）.mouseover（函数（）{
$（.img_div”）.css（'background-image'，'url（'+imageArr[count]+'）；
if（count==imageArr.length-1）
计数=0；
其他的
计数++；
})；

.mainbody{
宽度：500px；
高度：500px；
边框：1px纯红；
}
.img_分区{
宽度：200px；
高度：200px；
}

我已经为您创建了一个工作示例。您现在可以尝试：

<div class="mainbody">
<section class="container">
  <div class="img_div">
    hello
  </div>
</section>

jquery

let img_array = ['https://anotherjavaduke.files.wordpress.com/2018/08/avataaars-2.png', 
'https://images2.minutemediacdn.com/image/upload/c_crop,h_1192,w_2121,x_0,y_111/f_auto,q_auto,w_1100/v1554921884/shape/mentalfloss/22461-istock-176984635.jpg'];

$("div.mainbody").on('mousemove', function(e) {
    var i;
    $('.img_div').html('')

    for (i = 0; i < img_array.length; i++) {
        console.log($('.img_div').has('img').length)

        if ($('.img_div').has('img').length < img_array.length) {

            $('.img_div').append("<img style='width:100px; height:100px' src='" + img_array[i] + "'/>");
            $('.img_div').fadeIn("5000");
            $('.img_div').finish().fadeOut("5000");
            $('.img_div').offset({
                left: e.pageX,
                top: e.pageY + 20
            });


        }

    }
});

让img_数组=['https://anotherjavaduke.files.wordpress.com/2018/08/avataaars-2.png', 
'https://images2.minutemediacdn.com/image/upload/c_crop，h_1192，w_2121，x_0，y_111/f_auto，q_auto，w_1100/v1554921884/shape/mentalfloss/22461-istock-176984635.jpg']；
$（“div.mainbody”）。在（'mousemove'，函数（e）上{
var i；
$（'.img_div'）.html（''）
对于（i=0；i

工作示例

---

[Codepen]

https://codepen.io/prashen/pen/ZEEqJEo

拍摄2/3图像的方法是什么？当前，您将附加到

图像\u div

而不是空的，然后附加。并将循环限制为运行2次。您试图在每次移动鼠标时更改背景图像？“每次我移动鼠标”-放置

控制台.log（“mousemove”）

内置

.mousemove（）

函数（暂时删除所有其他代码）-移动鼠标时，您会看到mousemove会触发100次，因为它会触发（或多或少）对于你移动的每个像素。你应该每次添加一个

，而不是添加一个新的。你也可以
对鼠标移动进行去盎司处理，这样它就不会像以前那样频繁地触发。@freedomn-m啊，你说得对，我每次都会尝试更改
src
，而不是添加一个新的。@vijayP不一定是背景图像，而是一个新的在一个div中的图像，它将跟随光标到任何地方。请向我寻求更多帮助(도움을 더 알려주세요)是的，这是可行的，但我一直在寻找一种方法，让图像停留在光标旁边。然后它就不能设置为css背景图像，你想要这样的图像吗？@Heum Hwang你可以检查一下，让我知道。我看到你试图四处走动，告诉你不要发布仅链接的答案。你认为这样吗那里的限制是为了好玩？或者是因为开发人员不知道他们在做什么？或者只是为了痛苦？请不要因为某种原因而试图绕过那里的限制。好的，实际上我已经在那里创建了一个工作示例。好的，那么也必须在这里发布。@freedomn-m我已经更新了答案。我应该完全删除代码笔链接吗？键I也就是说，如果除此之外互联网上的每个站点都宕机了，那么问题和答案仍然是可读的/可访问的。当该站点是静态的（如codepen/JSFIDLE）时，添加额外的信息（特别是使用大量代码生成工作示例）是可以的。仅供参考指向临时/临时站点的链接（不是这种情况）例如，当有人在他们目前正在工作的网站上提出问题时，这些问题将在几分钟/几天内发生变化，这是完全没有用的。
let img_array = ['https://anotherjavaduke.files.wordpress.com/2018/08/avataaars-2.png', 
'https://images2.minutemediacdn.com/image/upload/c_crop,h_1192,w_2121,x_0,y_111/f_auto,q_auto,w_1100/v1554921884/shape/mentalfloss/22461-istock-176984635.jpg'];

$("div.mainbody").on('mousemove', function(e) {
    var i;
    $('.img_div').html('')

    for (i = 0; i < img_array.length; i++) {
        console.log($('.img_div').has('img').length)

        if ($('.img_div').has('img').length < img_array.length) {

            $('.img_div').append("<img style='width:100px; height:100px' src='" + img_array[i] + "'/>");
            $('.img_div').fadeIn("5000");
            $('.img_div').finish().fadeOut("5000");
            $('.img_div').offset({
                left: e.pageX,
                top: e.pageY + 20
            });


        }

    }
});