Javascript-Codepen演示中出現2張圖片

Question

我正在嘗試使用粒子滑塊在Codepen中創建一個演示。 出於某種原因，當我僅使用一個鏈接時，會不斷顯示2張圖像。 無法為我的生活找出原因。 別人能看到為什么會這樣嗎？ 我正在使用一個指向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

如文檔所述：

每個帶有next-particle類的img標簽都將使用NextParticle腳本自動初始化。

所以當您執行nextParticle = new NextParticle(document.all.logo); 您將再次實例化它。 只是跳過那個。

代碼筆示例

或者執行相反的操作，並使用nextParticle = new NextParticle(document.all.logo);實例化圖像上的腳本nextParticle = new NextParticle(document.all.logo); 但刪除next-particle類

代碼筆示例