1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* 鼠标特效 */
var a_idx = 0;
var a = new Array("❤Python❤","❤Julia❤","❤PHP❤","❤C❤","❤C++❤","❤C#❤","❤Java❤","❤Go❤","❤ASM❤","❤SQL❤","❤HTML❤","❤CSS❤","❤Javascript❤");
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

class ClickFontEffect {

    constructor(fontArray, colorArray) {
        // 文字列表
        this.fontArray = fontArray || ["快乐", "欢欣", "愉快", "欢喜"];
        // 颜色列表
        this.colorArray = colorArray || ["red", "green", "blue", "orange", "purple", "yellow"];
        // 获取body元素
        this.body = document.getElementsByTagName("body")[0];
        // 默认的css样式
        this.cssStyle = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;";

        let that = this;
        document.addEventListener("click", (e) => { that.showFont(e); })
    };

    showFont(e) {

        // 创建一个随机节点
        let newNode = document.createElement('span');
        // 随机字体和颜色
        let fontIdx = Math.floor(Math.random() * this.fontArray.length);
        let coloryIdx = Math.floor(Math.random() * this.colorArray.length);
        let randomFront = this.fontArray[fontIdx];
        let randomColor = this.colorArray[coloryIdx];
        // 向body中添加元素
        this.body.appendChild(newNode);
        // 添加样式
        newNode.style.cssText = this.cssStyle;
        newNode.style.color = randomColor;
        newNode.innerHTML = randomFront;

        // 鼠标点击位置
        newNode.style.left = e.clientX + 'px';
        newNode.style.top = e.clientY + 'px';

        // 动画
        setTimeout(function () {
            newNode.style.opacity = 0;
            newNode.style.top = newNode.offsetTop - 100 + 'px';
        }, 100);
        // 清除
        let that = this;
        setTimeout(function () {
            that.body.removeChild(newNode);
        }, 2000);
    }
};

window.onload = function () {
    let fontEffect = new ClickFontEffect();
}