鼠标点击特效

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
(function() {

        window.onclick = function(event) {

            var heart = document.createElement("b");

            heart.onselectstart = new Function('event.returnValue=false');

            document.body.appendChild(heart).innerHTML = "";

            heart.style.cssText = "position: fixed;left:-100%;";

            var f = 16, // 字体大小
                x = event.clientX - f / 2, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 1.2; // 放大缩小

            var timer = setInterval(function() {

                if (a <= 0) {

                    document.body.removeChild(heart);

                    clearInterval(timer);

                } else {

                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;

                }

            }, 12)

        }

        // 随机颜色
        function randomColor() {

            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";

        }

    }())