您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

js鼠标点击弹出浮动文字

使用的时候记得引入jquery

<script>
        let index = 0;
        $(document).ready($ => {
            $("body").click(e => {
                let a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
                let $i = $("<span/>").text(a[index]);
                index = (index + 1) % a.length;
                let x = e.pageX, y = e.pageY;
                $i.css({
                    "z-index": 9999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "red"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                    1500,
                    () => {
                        $i.remove();
                    });
            });
        });
    </script>

效果如下:

浮动文字.gif

看着有点重影了,这是因为我用GIF录制的时候没弄好


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进