Javascript - 出现在codepen演示中的2个图像

Question

我正在尝试使用粒子滑块在codepen中创建一个演示。出于某种原因，当我只使用一个链接时，我会继续显示2个图像。不能为我的生活解决原因。任何人都可以看到为什么会这样吗？我正在使用nextParticle js文件的外部链接。这是link

的index.html

<img id="logo" class="next-particle"  
   data-init-position="random"
   data-init-direction="left"
   data-fade-position="left"
   data-fade-direction="left"
   data-particle-gap="1"
   data-mouse-force="80"
   data-gravity="0.08"
   data-noise="30"
   src="http://res.cloudinary.com/mrmw1974/image/upload/v1509810511/XBD-150x150_grl5cl.png">

JavaScript的

nextParticle = new NextParticle(document.all.logo);

Answer 1

正如documentation所述：

每个带有img类的next-particle标签都将使用NextParticle脚本自动初始化。

所以，当你做nextParticle = new NextParticle(document.all.logo);时，你再次实例化它。跳过那个。

codepen example

或者使用nextParticle = new NextParticle(document.all.logo);执行相反的操作并在图像上实例化脚本，但删除next-particle类

codepen example