js 实现粒子吸附特效和鼠标点击特效

最新推荐文章于 2024-12-16 10:27:59 发布

Haywardwang

最新推荐文章于 2024-12-16 10:27:59 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Haywardwang/article/details/114475805

版权

这篇博客分享了一种使用jQuery和Html5 canvas创建动态粒子特效的方法。通过引入特定的JS代码，可以实现在页面上跟随鼠标移动的粒子效果。博客中提供了代码示例，包括绑定鼠标事件来显示带有提示信息的标签，并引入了一个外部js文件来完成粒子特效。虽然内容非原创，但展示了如何将这些技术结合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特效的效果就如同本页面的背景一样，有粒子随机移动、连结，甚至是吸附到你的鼠标周围。
代码如下，只要引入JQuery和一小段JS代码就可以了。本质上用到了Html5的canvas

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script >
    var a_idx=0;
    jQuery(document).ready(function($){
      addTips = function(e){
        var a= new Array("聚焦", "探索", "发现");
        var i=$("<span />").text(a[a_idx]);
        a_idx=(a_idx+1)%a.length;
        var x=e.pageX,y=e.pageY;
        i.css({
          "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
          "top":y-20,
          "left":x,
          "position":"absolute",
          "font-weight":"bold",
          "color":"#744b53"
        });
 
        $("body").append(i);
        i.animate({"top": y-180,"opacity":0},1500,function(){i.remove()})
        return false;
      }
      //绑定鼠标左键
      $("body").click(addTips);
      //绑定鼠标左键
      $("body").bind("contextmenu",addTips)
    });
    </script>
    
    //引入粒子特效，直接引入下方js文件即可，js文件已经放在云服务器，需要自取
    <script id="c_n_script" src="http://eknown.art/js/js.js"></script>

在这里我声明一下，内容非原创，这个也是我看到效果非常有意思，自己在百度上找的。因为百度上太多，已经不知道第一个是谁写的了。