JS鼠标点击爱心，文字特效

很久之前  博客   就使用了很多花里胡哨的东西，比如Live2D模型，背景，文字，页面离开载入，鼠标点击，浮动，滚动等等。

在网上也有很多这样案例，之前使用的是原生的js文字点击特效。

后面JQ也添加了此效果，于是转移用JQ了，简单好用。

效果浏览地址：  JS鼠标点击爱心，文字特效 

文字可替换。

function ShuBiao() {
    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": -1,"top": y - 20,"left": x,"position": "absolute","color": "#FFF","font-size": "14px"});
            $("body").append($i);
            $i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});
        });
    });
}

爱心效果：

//鼠标点击爱心特效  放入js中即可
    !function (e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y-- , s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(),
                o(e);
        };
    }
14
15　　代码展开