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

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>

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


wordpress 实现两种效果

最简单的方法就是直接在 WordPress 主题的 footer.php 文件中 <?php wp_footer(); ?> 的前面加上一段代码就行了。
网上一搜索也基本都是用的这方法。

<script type="text/javascript">
/*富强民主文明和谐*/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(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": 9999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>

粒子插件

插件名Canvas-Nest.js

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发