效果如下：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>社会主义核心价值观</title>

</head>

<body>

    <!-- div用来撑高body -->

    <div style='height: 100vh;'>点击鼠标试试</div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

// 社会主义核心价值观

var a_idx = 0;

    $("body").click(function(e) {

        var a = new Array(

            "富强", "民主", "文明", "和谐",

            "自由", "平等", "公正", "法治",

            "爱国", "敬业", "诚信", "友善"

            );

        var $i = $("<span/>").text(a[a_idx]);

        a_idx = (a_idx + 1) % a.length;

        var x = e.pageX,

        y = e.pageY;

        $i.css({

            "z-index": 144469,

            "top": y - 20,

            "left": x,

            "position": "absolute",

            "font-weight": "bold",

            "color": "#f00"

        });

        $("body").append($i);

        $i.animate({

            "top": y - 180,

            "opacity": 0

        },

        1500,

        function() {

            $i.remove()

        })

    });

</script>

</html>

社会主义核心价值观js代码的更多相关文章

  1. 笔记-爬虫-js代码解析

    笔记-爬虫-js代码解析 1.      js代码解析 1.1.    前言 在爬取网站时经常会有js生成关键信息,而且js代码是混淆过的. 以瓜子二手车为例,直接请求https://www.guaz ...

  2. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  3. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  4. ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，Write Once,Run Anywhere

    ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNa ...

  5. 使用seajs来引入js代码

    注意的是:引入jquery的代码最好放在html文件中,本文是为了说明seajs中require如何使用的,才将jquery放入seajs中的. html中对应的代码: <script type ...

  6. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  7. JS 代码调试经验总结（菜鸟必读）

    前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的 ...

  8. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  9. 17-Python执行JS代码--PyExecJS、PyV8、Js2Py

    一.Python执行JS代码--PyExecJS.PyV8.Js2Py 1.1.PyExecJS PyExecJS的优点是您不需要照顾JavaScript环境.特别是,它可以在Windows环境中运行 ...

随机推荐

  1. app横竖屏切换

    问题: 使用react编写的页面,编译后的页面文件打包成app安装后,在手机上显示时,初次横竖屏切换时会出现页面尺寸渲染问题,要跳到其它页面后才能恢复,如图: 由竖屏切换成横屏后页面出现很多空白. 解 ...

  2. tomcat集群及session共享

    一般来说,java web app主要用作两个领域: 1.api.api一般是无状态的,所以无需考虑session共享的问题 2.传统web应用和网站,如crm,oa,erp,b2c,bbs等.尤其b ...

  3. MS Office CVE-2015-1641 恶意 Exploit 样本分析

    MS Office CVE-2015-1641 恶意 Exploit 样本分析 在对最近的一个恶意 MS Office 文档样本进行分析时,我们发现了一些有趣的特性.这个文档利用 CVE-2015-1 ...

  4. 【Python学习笔记】Jupyter Lab目录插件安装

    Jupyter Lab目录插件安装 当然首先你得有python和已经安装了jupyter lab. 1 安装jupyter_contrib_nbextensions 首先先安装jupyter_cont ...

  5. STL容器 vector,list,deque 性能比较

    C++的STL模板库中提供了3种容器类:vector,list,deque对于这三种容器,在觉得好用的同时,经常会让我们困惑应该选择哪一种来实现我们的逻辑.在少量数据操作的程序中随便哪一种用起来感觉差 ...

  6. docker stack 部署容器监控方案（cAdvisor、Prometheus、Grafana）

    =============================================== 2018/7/8_第1次修改                       ccb_warlock === ...

  7. android解决AVD中文路径无法启动问题

    在as中新建一个AVD,然而启动时却报错,总之是不能找到中文路径 然后这个虚拟设备被默认安装在了C盘我的用户李敏啊,而我用户名是中文名导致无法识别 解决办法,使用链接文件格式修改虚拟设备配置路径, 比 ...

  8. CSS3实现扇形动画菜单特效

    CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. Jdk 和 Tomcat的 安装。

    1.再分发服务器上下载JDK,然后利用xftp上传到聚石塔等 2. 解压: tar -zxvf jdk-8u121-linux-x64.tar.gz 3.配置环境变量: export JAVA_HOM ...

  10. python3项目之数据可视化

    数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的规律和关联. 数据科学家使用Python编写了一系列令人印象深刻的可视化和分析工具,其中很多也可供 ...