冲突 javascript 或鼠标悬停事件过多？

Question

Currently, I have layered 4 images on top of a background image.目前，我在背景图像上叠加了 4 张图像。 When your mouse hovers over each image, it disappears until the user refreshes.当您的鼠标悬停在每个图像上时，它会消失，直到用户刷新。 I would like to create 26 clones of an image.我想创建 26 个图像的克隆。 Ideally, I could position each image copy and the jquery would autogenerate id names like so (#myid(n)) aka #myid1, #myid2.理想情况下，我可以 position 每个图像副本和 jquery 会自动生成像这样的 id 名称 (#myid(n)) aka #myid1, #myid2。 As I am unable to pull this image cloning off so far, I have to copy and paste each block of code over and over again.由于到目前为止我无法复制此图像，因此我必须一遍又一遍地复制和粘贴每个代码块。 However, once I added my sixth image, I encountered performance problems, and my code stopped working.但是，一旦我添加了第六张图片，我就遇到了性能问题，并且我的代码停止了工作。

I have included two codepens.我已经包括了两个代码笔。 This codepen works with 4 image copies: https://codepen.io/narutofan389/collab/NWGpQWo此 codepen 适用于 4 个图像副本： https://codepen.io/narutofan389/collab/NWGpQWo

This codepen doesn't work with 6 copies: https://codepen.io/narutofan389/collab/MWapQyO此 codepen 不适用于 6 个副本： https://codepen.io/narutofan389/collab/MWapQyO

I have heard too many mouseover events can create performance issues.我听说过多的鼠标悬停事件会造成性能问题。 I am not sure if this is what the source of my issues.我不确定这是否是我问题的根源。 I am also trying on a separate codepen to test image cloning with separate ids.我也在尝试使用单独的代码笔来测试具有单独 ID 的图像克隆。 This is the code so far taken from another stack overflow answer:这是迄今为止从另一个堆栈溢出答案中获取的代码：

html html

<body>
<div id="sand"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript javascript

$(document).ready(function(){

      for (var i = 0; i < 2; i++) {  
          var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' 
          id='myid"+i+"'/>"; 
          $("body #sand").append(img);
      }

})

Again I am trying to generate different ids that I can position individually?我再次尝试生成可以单独使用 position 的不同 ID？

Answer 1

Since your cloning snippet is in jQuery, I hope a solution using it is acceptable.由于您的克隆片段位于 jQuery 中，我希望使用它的解决方案是可以接受的。

First I had to add a #sand container missing from your markup, as it's where the code is appending the images.首先，我必须添加标记中缺少的#sand容器，因为它是代码附加图像的位置。 Also added a div wrapper to each image to mirror your codepen (although you might not need it), and added a sand class to the images.还为每个图像添加了一个div包装器以镜像您的 codepen（尽管您可能不需要它），并在图像中添加了一个sand class。

Then, instead of adding an event for each element, I used Event delegation so I can attach just one handler to the wrapping element.然后，我没有为每个元素添加一个事件，而是使用了事件委托，因此我可以只将一个处理程序附加到包装元素。 I'm targeting all images inside the #sand container that are not already hidden .我的目标是#sand容器中尚未隐藏的所有图像。

And then simplified the css a bit removing redundant rules and moving common properties to the new classes.然后对 css 进行了简化，删除了冗余规则并将通用属性移至新类。

 for (let i = 1; i <= 6; i++) { // Create the wrapping div var $container = $("<div class='sand" + i + "'>"); // Create the img var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>"); // Add image to container $container.append($img); // Add container to the document $("body #sand").append($container); } // Listen when the mouse hovers an image $('#sand').on('mouseenter', 'img.sand:not(.hide)', function() { $(this).addClass('hide'); }); $('#sand').on('animationend', 'img.sand.hide', function() { $(this).hide(); });

 html { background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden; } #bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }.sand { position: absolute; height: 90vh; } #sand6 { top: 0px; right: 200px; } #sand5 { top: 300px; left: 500px; } #sand4 { top: 300px; right: 200px; }.hide { animation: fade 3s; animation-fill-mode: forwards; } #sand3 { height: 100vh; top: 0px; left: 700px; } #sand2 { height: 100vh; top: 0px; left: 300px; } #sand1 { position: relative; height: 100vh; right: 30px; }

 <div id="bg"> <img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg " alt="lock"> </div> <div id="sand"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

冲突 javascript 或鼠标悬停事件过多？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-25 20:37:24

冲突 javascript 或鼠标悬停事件过多？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-25 20:37:24

解决方案1
0 已采纳 2020-04-25 20:37:24