Javascript 鼠标点击冒泡特效

灰太狼 2022-06-14 00:49 206阅读 0赞

### 一个用JS写的鼠标左击特效 ###

点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”…

## 常用Emoji ##

可以自行替换，如需复制，请从底部链接移步至Github

![这里写图片描述][SouthEast]

#### 代码 ####

onload = function() { 
        var click_cnt = 0;
        var $html = document.getElementsByTagName("html")[0];
        var $body = document.getElementsByTagName("body")[0];
        $html.onclick = function(e) { 
            var $elem = document.createElement("b");
            $elem.style.color = "#E94F06";
            $elem.style.zIndex = 9999;
            $elem.style.position = "absolute";
            $elem.style.select = "none";
            var x = e.pageX;
            var y = e.pageY;
            $elem.style.left = (x - 10) + "px";
            $elem.style.top = (y - 20) + "px";
            clearInterval(anim);
            switch (++click_cnt) {
                case 10:
                    $elem.innerText = "OωO";
                    break;
                case 20:
                    $elem.innerText = "(๑•́ ∀ •̀๑)";
                    break;
                case 30:
                    $elem.innerText = "(๑•́ ₃ •̀๑)";
                    break;
                case 40:
                    $elem.innerText = "(๑•̀_•́๑)";
                    break;
                case 50:
                    $elem.innerText = "（￣へ￣）";
                    break;
                case 60:
                    $elem.innerText = "(╯°口°)╯(┴—┴";
                    break;
                case 70:
                    $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
                    break;
                case 80:
                    $elem.innerText = "╮(｡>口<｡)╭";
                    break;
                case 90:
                    $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
                    break;
                case 100:
                case 101:
                case 102:
                case 103:
                case 104:
                case 105:
                    $elem.innerText = "(ꐦ°᷄д°᷅)";
                    break;
                default:
                    $elem.innerText = "❤";
                    break;
            }
            $elem.style.fontSize = Math.random() * 10 + 8 + "px";
            var increase = 0;
            var anim;
            setTimeout(function() { 
                anim = setInterval(function() { 
                    if (++increase == 150) {
                        clearInterval(anim);
                        $body.removeChild($elem);
                    }
                    $elem.style.top = y - 20 - increase + "px";
                    $elem.style.opacity = (150 - increase) / 120;
                }, 8);
            }, 70);
            $body.appendChild($elem);
        };
    };

#### 预览 ####

![Emoji 预览][Emoji]

--------------------

![预览][SouthEast 1]

--------------------

![预览][SouthEast 2]

#### Github地址： ####

> [https://github.com/djzhao627/JSClickBubble][https_github.com_djzhao627_JSClickBubble]

[SouthEast]: /images/20220614/7b3a2b767e24438eb86eae173b1262bb.png
[Emoji]: /images/20220614/f9c514a4e5424aeca21d56d506509769.png
[SouthEast 1]: /images/20220614/43f0363e7dea49c6ae7cb162c7f15e8a.png
[SouthEast 2]: /images/20220614/b1a3ff206a85411d94955e2facfbc295.png
[https_github.com_djzhao627_JSClickBubble]: https://github.com/djzhao627/JSClickBubble