页面点击特效源码解析

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;
                    a_idx = Math.round(Math.random()*a.length);
        var x = e.pageX,
                y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "color":`rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},1)`
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
         },1500,function() {
             $i.remove();
         });
        });
});

<p>石璞东好帅</p>
<p>石璞东好帅</p>
<p>石璞东好帅</p>
<p>石璞东好帅</p>
<p>石璞东好帅</p>
<p>石璞东好帅</p>

! function(e, t, a) {
     //对当前页面由用户点击产生的心进行操作,若产生的心的透明度小于零了,则移除该元素,若不小于零,则该心继续向上移动,并慢慢放大
    function r() {
        for(var e = 0; e < n.length; e++) 
            n[e].alpha <= 0 ? (t.body.removeChild(n[e].el), n.splice(e, 1)) : (n[e].y--, n[e].scale += .004, 
            n[e].alpha -= .013, 
            n[e].el.style.cssText = "left:" + n[e].x + "px;top:" + n[e].y + "px;opacity:" + n[e].alpha + ";transform:scale(" + n[e].scale + "," + n[e].scale + ") rotate(45deg);background:" + n[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    //存放页面心的数组
    var n = [];
    //对于不同浏览器做兼容处理
    e.requestAnimationFrame =
        e.requestAnimationFrame || 
        e.webkitRequestAnimationFrame || 
        e.mozRequestAnimationFrame || 
        e.oRequestAnimationFrame || 
        e.msRequestAnimationFrame || 
        function(e) {
            setTimeout(e, 1e3 / 60)
    },
    //创建style标签并写入css样式
    function(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    //将用户点击操作产生的心push进n数组之内
    function() {
        var a = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            a && a(),
            function(e) {
                var a = t.createElement("div");
                a.className = "heart", 
                n.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
                    }), 
                    t.body.appendChild(a)
                }(e)
            }
        }(), 
    r()
}(window, document);

1. function(){/*code*/}()
   function fn(){/*code*/}()
   以上两种写法并不是自调用函数的正确写法,而且会报错的呢~
2. var fn ='aaa',function(a){alert(a)}(1)
   YY想出来该行代码的执行结果应该是弹出1,但是毫无意外的又报错了~
3. fn = 'aaa',function(a){alert(a)}(1)/*弹出1*/
   fn = function(a){alert(a)}(1),function(b){alert(b)(2)/*先弹1在弹2*/
   function r (){alert(1)}
   fn = function(a){alert(a)}(2),r()
   /*先弹2在弹1*/