鼠标点击产生"富强""民主""文明"方法

2020-05-13 10:09:03

参考地址 JQuery 实现鼠标点击特效"富强""民主""文明"方法

最近逛好多博客发现都有一个鼠标点击弹窗的事件, 感觉非常棒

#就像这个样子的

 

百度了一下 发现还是实现还是比较简单的(当然我也不会),但是copy 是程序员最喜欢的事,所以我就转载这个文章,也当是自己的一个小笔记,贴上代码

# js 部分的代码

<script>//定义获取词语下标var a_idx = 0;jQuery(document).ready(function($) {//点击body时触发事件$("body").click(function(e) {//需要显示的词语var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");//设置词语给span标签var $i = $("<span/>").text(a[a_idx]);//下标等于原来下标+1  余 词语总数a_idx = (a_idx + 1)% a.length;//获取鼠标指针的位置，分别相对于文档的左和右边缘。//获取x和y的指针坐标var x = e.pageX, y = e.pageY;//在鼠标的指针的位置给$i定义的span标签添加css样式$i.css({"z-index" : 999999,"top" : y - 20,"left" : x,"position" : "absolute","font-weight" : "bold","color" : "#ff6651"});//在body添加这个标签$("body").append($i);//animate() 方法执行 CSS 属性集的自定义动画。//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp$i.animate({//将原来的位置向上移动180"top" : y - 180,"opacity" : 0//1500动画的速度}, 1500, function() {//时间到了自动删除$i.remove();});});});</script>

#实际演示效果  点我查看效果


  • 精彩推荐

  • 2017-09-05 11:48:16

    Laravel 服务容器实例教程 —— 深入理解控制反转（IoC）和依赖注入（DI）

    容器，字面上理解就是装东西的东西。常见的变量、对象属性等都可以算是容器。一个容器能够装什么，全部取决于你对该容器的定义。当然，有这样一种容器，它存放的不是文本、数值，而是对象、对象的描述（类、接口）或者是提供对象的回调，通过这种容器，我们得以实现许多高级的功能，其中最常提到的，就是 “解耦” 、“依赖注入（DI）”。本文就从这里开始。

  • 2017-09-11 09:22:09

    nginx配置返回文本或json

    　有些时候请求某些接口的时候需要返回指定的文本字符串或者json字符串，如果逻辑非常简单或者干脆是固定的字符串，那么可以使用nginx快速实现，这样就不用编写程序响应请求了，可以减少服务器资源占用并且响应性能非常快

  • 2017-09-11 11:30:09

    linux 获取经过N层Nginx转发的访问来源真实IP

    通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip，但是当我们使用了nginx作为反向代理后，由于在客户端和web服务器之间增加了中间层，因此web服务器无法直接拿到客户端的ip，通过$remote_addr变量拿到的将是反向代理服务器的ip地址。如果我们想要在web端获得用户的真实ip，就必须在nginx这里作一个赋值操作，如下：

  • 2017-09-11 16:15:11

    Nginx日志管理

    通过访问日志，你可以得到用户地域来源、跳转来源、使用终端、某个URL访问量等相关信息；通过错误日志，你可以得到系统某个服务或server的性能瓶颈等。因此，将日志好好利用，你可以得到很多有价值的信息。

  • 2017-09-11 16:34:14

    Nginx如何保留真实IP和获取前端IP

    squid，varnish以及nginx等，在做反向代理的时候，因为要代替客户端去访问服务器，所以，当请求包经过反向代理后，在代理服务器这里这个IP数据包的IP包头做了修改，最终后端web服务器得到的数据包的头部的源IP地址是代理服务器的IP地址，这样一来，后端服务器的程序给予IP的统计功能就没有任何意义，所以在做代理或集群的时候必须解决这个问题，这里，我以nginx做集群或代理的时候如何给后端web服务器保留(确切的说是传递)客户端的真实IP地址。

  • 2017-09-11 16:35:22

    ngx_http_realip_module使用详解

    网络上关于ngx_http_realip_module的文章千篇一律，全是在说怎么安装，最多贴一个示例配置，却没有说怎么用，为什么这么用，官网文档写得也十分简略，于是就自己探索了一下。

  • 2017-09-11 16:39:43

    基于Nginx dyups模块的站点动态上下线

    在分布式服务下，我们会用nginx做负载均衡， 业务站点访问某服务站点的时候， 统一走nginx， 然后nginx根据一定的轮询策略，将请求路由到后端一台指定的服务器上。