鼠标点击网页出现文字

港控/mmm° 2023-10-02 03:27 3阅读 0赞

<!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <body>
    <div style="width:1024px;height:1024px;">
    <h1>hello word!</h1>
    </div>
    </body>
     
    <script type="text/javascript">
    /*鼠标点击出现文字*/
    $(document).ready(function(){
        
        var a_index = 0;
        $("body").click(function(e){
        
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_index]);
            a_index = (a_index + 1) % a.length;
            var x = e.pageX,y = e.pageY;
            $i.css({
        
                "z-index": 99999,
                "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>

效果如图：

![在这里插入图片描述][4da3d3aae43843deaf623348da5f4c25.png]

[4da3d3aae43843deaf623348da5f4c25.png]: https://img-blog.csdnimg.cn/4da3d3aae43843deaf623348da5f4c25.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击爆炸

> 直接引入以下js文件 function clickEffect() { let balls = []; let long

拼搏现实的明天。/ 2024年04月07日 12:52/ 0 赞/ 94 阅读

相关模拟鼠标点击

< DOCTYPE HTML PUBLIC -WCDTD HTML TransitionalEN> <table style="WIDTH: 100%; TABLE-LAYO

痛定思痛。/ 2023年10月18日 08:13/ 0 赞/ 165 阅读

相关鼠标点击网页出现文字

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

港控/mmm°/ 2023年10月02日 03:27/ 0 赞/ 4 阅读

相关 js点击屏幕出现文字

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js点击屏幕出现

电玩女神/ 2023年08月17日 16:24/ 0 赞/ 140 阅读

相关 jquery鼠标移动、点击页面出现爱心

爱心 1、css画一个爱心 .main{ width: 20px; position: fixed; } //

以你之姓@/ 2022年09月08日 00:08/ 0 赞/ 217 阅读

相关禁止鼠标多次点击选中div中的文字

来源：[http://www.cnblogs.com/myjiejie/archive/2010/12/04/1896327.html][http_www.cnblogs.co

雨点打透心脏的1/2处/ 2022年06月18日 06:45/ 0 赞/ 236 阅读

相关 swing 点击输入框去除文字

给文本框设置鼠标单击监听，再进行清空文本操作 import java.awt.event.MouseAdapter; import java.awt.event.Mo

我就是我/ 2022年06月15日 10:22/ 0 赞/ 267 阅读

相关鼠标点击不选中文字

前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常

╰半夏微凉°/ 2022年06月05日 08:51/ 0 赞/ 292 阅读

相关鼠标点击显示冒泡文字

逛网站的时候遇到一个有趣的鼠标点击事件： ![这里写图片描述][Image 1] 点击鼠标会有文字不显示，上漂一定时间后消失。现记录作为收藏具体代码：

谁践踏了优雅/ 2022年05月29日 06:57/ 0 赞/ 296 阅读

相关鼠标点击特效·爱心❤和文字

> 爱心特效❤ <script type="text/javascript"> / 网页鼠标点击特效（爱心）/ !fu

末蓝、/ 2021年09月23日 16:30/ 0 赞/ 326 阅读