javascript - Javascript-Codepen演示中出现2张图片

我正在尝试使用粒子滑块在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);

最佳答案

如documentation所述：


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


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

codepen example

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

codepen example

关于javascript - Javascript-Codepen演示中出现2张图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47895904/