JavaScript-2图像出现在代码演示中

Question

我试着用粒子滑块在代码中创建一个演示。由于某种原因，当我只使用一个链接时，我就会得到两个显示的图片。不能为我的一生找出原因。还有人知道为什么会发生这种事吗？我使用到nextParticle js文件的外部链接。这是链接

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

正如文档所说：

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

因此，当您执行nextParticle = new NextParticle(document.all.logo);时，您将再次实例化它。跳过这个吧。

代码示例

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

代码示例