实现鼠标点击出现图片(文本
<script>
    jQuery(document).ready(function($) {
        var res = 'https://xn--qzw410c.top/wp-content/uploads/2024/07/cropped-QQ图片20240629222052.gif';
        
        $("body").on("click", function(e) {
            // 每次点击时创建一个新的 img 元素
            var $i = $("<img>").prop('src', res);
            // var $i = $("<b>").text("+"+(res)); // 这是文本
            
            // 获取鼠标点击位置
            var x = e.pageX, y = e.pageY;

            // 设置 CSS
            $i.css({
                "height": 50,
                "width": 50,
                "z-index": 99999,
                "top": y - 15,
                "left": x,
                "position": "absolute",
            });

            // 将 img 添加到 DOM 中
            $("body").append($i);

            // 动画化地移动和消失
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
            
            // 阻止事件冒泡
            e.stopPropagation();
        });
    });
</script>

评论

  1. 7 月前
    2024-8-18 12:55:33

    真不错,拿走了

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇