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

特效的效果就如同本页面的背景一样,有粒子随机移动、连结,甚至是吸附到你的鼠标周围。
代码如下,只要引入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>

 

 

原文链接:
https://blog.csdn.net/Haywardwang/article/details/114475805?spm=1001.2014.3001.5501
© 版权声明
THE END
喜欢就支持一下吧
点赞43
分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发