JS特效 网页点击事件 弹出指定汉字

最近逛一位大佬的博客的时候,发现了他博客上的鼠标点击事件,效果如下图

个人博客地址–为了记录生活,顺便防止重复造轮子

Github

鼠标点击事件

感觉文字和内容都特别有趣,所以就研究了一下。

将效果总结为一个HTML,内容如下,保证可用。

<html>
    <head>
    </head>
    <body>
        点击鼠标
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        /*天真网(tzw520.cn) 鼠标特效 */
        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": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#ff6651"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            });
        });
        </script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/m0_38092942/article/details/80746755