论坛里看到的效果很好玩，实现一下

悠悠 2022-03-17 08:06 156阅读 0赞

效果如下：  
![在这里插入图片描述][20190223085851999.gif]  
代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    </head>
    <body style="height: 1000px;background-color: grey;">
    	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    	<script>
    		var i = 0;
    		$(document).ready(function($) {
    		    $("body").click(function(e) {
    		        var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"];
    		        var dom_span = $("<span>").text(arr[i]);
    		        i = (i + 1) % arr.length;
    		        var x = e.pageX,
    		        y = e.pageY;
    		        dom_span.css({
    		            "z-index": 99999,
    		            "top": y - 20,
    		            "left": x,
    		            "position": "absolute",
    		            "font-weight": "bold",
    		            "color": "#ff6651"
    		        });
    		        $("body").append(dom_span);
    		        dom_span.animate({
    		            "top": y - 180,
    		            "opacity": 0
    		        },1500,function() {
    		            dom_span.remove();
    		        });
    		    });
    		});
    
    	</script>
    </body>
    </html>

[20190223085851999.gif]: /images/20220317/1abf987e64bd4661aadcc08bd5172e21.png

发表评论取消回复

表情：

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

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

相关阅读

相关文字雨滴，很酷炫的效果！

tml <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8...

客官°小女子只卖身不卖艺/ 2024年04月17日 19:19/ 0 赞/ 86 阅读

相关汇编语言超好玩

持续更新中。。。第一章基础知识 1. 一个内存单元的大小是一字节（1Byte），也就是8比特，是一串8比特的二进制数。 2. 汇编指令是机器指令的助记符，同

水深无声/ 2022年12月24日 11:00/ 0 赞/ 90 阅读

相关一个很好的相册切换效果

[http://blog.cnfstar.com/p/view.php?id=33\4|5|3][http_blog.cnfstar.com_p_view.php_id_33_

今天药忘吃喽~/ 2022年08月27日 03:49/ 0 赞/ 149 阅读

相关 Android下拉刷新效果实现

本文主要包括以下内容 1. 自定义实现pulltorefreshView 2. 使用google官方SwipeRefreshLayout 下拉刷新大致原理判断当前是

约定不等于承诺〃/ 2022年08月23日 05:42/ 0 赞/ 248 阅读

相关 linux下discuz 论坛安装

环境：系统版本：centos 5.7 软件版本：apr-1.4.6.tar.gzapr-util-1.4.1.tar.gz pcre-8.30.tar.gz httpd-

逃离我推掉我的手/ 2022年03月28日 18:55/ 0 赞/ 312 阅读

相关论坛里看到的效果很好玩，实现一下

效果如下： ![在这里插入图片描述][20190223085851999.gif] 代码如下： <!DOCTYPE html> <html>

悠悠/ 2022年03月17日 08:06/ 0 赞/ 157 阅读

相关 Java实现论坛系统

学习Java实现论坛系统，本文实现该系统的功能截图，和数据库设计SQL语句供大家参考 1.论坛管理系统背景随着现在科技的发展，论坛系统越来越多，本系统仿照CSDN做一

ゝ一世哀愁。/ 2022年02月02日 02:43/ 0 赞/ 279 阅读

相关 liferay theme改变资源文件，在不重新部署情况下看到效果

解决方案：首先，在portal-ext.properties中设置如下属性： 1. theme.css.fast.load=false 2. theme.p\_w\_

梦里梦外;/ 2022年01月14日 02:49/ 0 赞/ 133 阅读

相关好玩好玩！GitHub 上开源的坦克大战！

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达 -------------------- 本文编辑：小逛；首发公众号@逛逛GitHub，微博@

冷不防/ 2021年09月01日 04:24/ 0 赞/ 402 阅读

相关 JS实现仿中关村论坛评分后弹出提示效果的方法

[JS实现仿中关村论坛评分后弹出提示效果的方法][JS] 本文实例讲述了JS实现仿中关村论坛评分后弹出提示效果的方法。分享给大家供大家参考。具体实现方法如下：...

系统管理员/ 2021年04月22日 16:03/ 0 赞/ 408 阅读