页面点击出现文字上浮

落日映苍穹つ 2022-04-02 17:58 219阅读 0赞

## **偶然间浏览博客园看到点击出现文字效果** ##

于是打开控制台看了看鼠标单击事件  
核心代码如下

<script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
            var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
            var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({ 
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() { 
                $i.remove();
            });
        });
    });
    </script>

鼠标单击效果大致如下:  
![单击效果][20181227144049272.png]

[20181227144049272.png]: /images/20220402/4a833779022c42debef9b1ab24f88425.png

发表评论取消回复

表情：

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

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

相关阅读

相关 RadioButton文字点击变色样式

----------------------------------item属性标记------------------------------ an

悠悠/ 2023年10月04日 09:14/ 0 赞/ 3 阅读

相关解决bootstrap按钮点击出现阴影

![在这里插入图片描述][2021052210021215.png] 代码如下: <style> html body{

短命女/ 2022年10月14日 14:57/ 0 赞/ 184 阅读

相关用JS做的小事例，鼠标点击出现东西！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

悠悠/ 2022年08月21日 08:56/ 0 赞/ 145 阅读

相关导航栏点击出现提示框（弹出层）

导航栏点击出现提示框（弹出层） 2018年10月26日 15:17 1.先给导航栏下的<a>标签设属性 data-method="" ，其他理应可以（没有尝试），给

灰太狼/ 2022年05月14日 15:08/ 0 赞/ 304 阅读

相关 css3鼠标点击出现波浪动态效果案例现场

css3鼠标点击出现波浪动态效果案例现场话不多说先上图： ![这里写图片描述][70] 代码：（有es6语法注意兼容问题，推荐Chrome打开） <ht

你的名字/ 2022年05月13日 06:38/ 0 赞/ 244 阅读

相关页面点击出现文字上浮

偶然间浏览博客园看到点击出现文字效果于是打开控制台看了看鼠标单击事件核心代码如下 <script type="text/javascript">

落日映苍穹つ/ 2022年04月02日 17:58/ 0 赞/ 220 阅读

相关点击页面其它地方关闭弹出层

$(".statusoption").click(function () { $(this).children().toggle();

「爱情、让人受尽委屈。」/ 2022年02月22日 21:10/ 0 赞/ 331 阅读

相关页面点击预览按钮弹出图片窗口

jsp： <script type="text/javascript" src="$\{ctx \}/resources/javascript/imageView.js">

墨蓝/ 2022年01月21日 03:41/ 0 赞/ 582 阅读

相关鼠标点击显示文字效果

需引入jquery.js jQuery(document).ready(function($) { $("html,body").click(fun

柔情只为你懂/ 2022年01月14日 13:09/ 0 赞/ 359 阅读

相关 css、js实现页面点击出现随机文件特效

![70][] 代码如下： <html> <body> <div>单击显示随机文字</div> </body> <script

小鱼儿/ 2021年05月12日 11:55/ 0 赞/ 426 阅读