时间戳

首页 > 解决方案 > 鼠标在jquery中移动时添加不同的图像

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

问题描述

我正在尝试制作一个 jquery 代码，当您移动鼠标时，您可以在其中显示不同的图像（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
      });
    }
  });

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

我肯定会在 jquery 数组中添加更多图像，但是我应该如何只添加两个图像，并在移动鼠标时更改这些图像？

标签： javascriptjqueryhtmlcss

解决方案

利用background-image

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 count=0;
$( ".mainbody" ).mouseover(function() {
  $( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
  if(count == imageArr.length-1)
    count=0;
  else
   count++;
});
.mainbody{
    width: 500px;
    height: 500px;
    border:1px solid red;
}
.img_div{
    width: 200px;
    height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
  <section class="container">
    <div class="img_div">
    </div>
  </section>
</div>

这是工作小提琴；

使用mousemove（为了避免我使用鼠标移动时图像多次更改timeout）

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 count=0;
var timeoutid = 0;

function setImage() {
  $( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
  if(count == imageArr.length-1)
    count=0;
  else
   count++;
}


$(".mainbody").mousemove(function() {
    clearTimeout(timeoutid);
    timeoutid = setTimeout(setImage, 100);
});
.mainbody{
    width: 500px;
    height: 500px;
    border:1px solid red;
}
.img_div{
    width: 200px;
    height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
  <section class="container">
    <div class="img_div">
    </div>
  </section>
</div>

화이팅！

推荐阅读