博客园之鼠标粒子吸附特效

   之前看见有人博客中带有鼠标粒子吸附特效，觉得很漂亮。找了很多教程，但总是不完善，自己总结了一下，记录下来。

   鼠标粒子吸附特效如图：

        

 

 1.申请JS权限

      点击博客园-->管理-->设置-->下拉找到：博客侧边栏公告（支持HTML代码）（申请JS权限）-->点击‘JS申请权限'-->写入申请理由。

      权限申请通过一般需要一两个小时，耐心等待即可。申请成功后，如图显示：

         

      很多教程中，只是提供了粒子吸附代码，没有说明需要申请JS权限或者只是一带而过。所以我之前特效出不来，一直以为是代码的问题，弄了好久。

 

2.添加特效代码

      点击博客园-->管理-->设置-->下拉找到'页脚Html代码'-->添加如下代码--> 保存(保存按钮在页面左下角)：

/*粒子线条，鼠标移动会以鼠标为中心吸附的特效*/
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/hxun/canvas-nest.js" color="255,0,255" opacity="1" count="100" zindex="-2">
  if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      //这里可以写移动端展示效果代码，本人没试过
  }
</script>

　　

配置详解：

• color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
• pointColor: 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
• opacity: 线条透明度（0~1）, 默认: 0.5
• count: 线条的总数量, 默认: 150
• zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
• https://blog-static.cnblogs.com/files/hxun/canvas-nest.js 这是添加的文件的链接

      注：对于color，可以在百度上搜索：RGB，里面会提供RGB颜色对照表，选择自己喜欢的，将代码中的数值替换掉即可。pointcolor与之类似。