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

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>

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


  • 精彩推荐

  • 2019-08-20 08:51:52

    一台Linux服务器可以负载多少个连接？

    我们在压测一台目标服务器，想看下负载的连接数，当我们压到一定数量的时候，控制台突然报"too many open files"，这是因为linux系统创建一个TCP连接的时候，都会创建一个socket句柄，每个socket句柄就是一个文件句柄。

  • 2019-08-20 08:56:42

    Linux下Http高并发参数优化之TCP参数

    Linux 内核参数考虑的是最通用场景，并不符合用于支持高并发访问的Web服务器的定义，所以需要修改Linux内核参数。其次，对 Nginx 的一些参数，也需要根据服务情况进行调整。

  • 2019-08-20 11:05:30

    php，nginx,线程和进程分析

    大多数的 Linux 程序都倾向于使用进程而不是线程，因为 Linux 下相对来说创建进程的开销比较小，而 Linux 的线程功能又不是很强大。

  • 2019-08-20 11:22:36

    Node.js 单线程与多进程比较

    进过上面两种方式的对比，结果很明显，多进程处理速度是单线程处理速度的 4 倍多。而且有条件的情况下，如果电脑 CPU 足够，进程数更多，那么速度也会更快。

  • 2019-08-22 13:35:27

    Generator函数的语法

    执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了是状态机还是一个遍历器对象生成函数。 返回遍历器对象，可以依次遍历Generator函数内部的每一个状态。

  • 2019-08-22 16:38:15

    理解JS原型对象与原型链(重要清晰)

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象对应拥有一个原型，对象以其原型为模板、从原型继承方法和属性。而同时原型也是对象，它也拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

  • 2019-08-22 17:26:21

    详解javaScript的深拷贝

    最开始意识到深拷贝的重要性是在我使用redux的时候（react + redux）， redux的机制要求在reducer中必须返回一个新的对象，而不能对原来的对象做改动，事实上，当时我当然不会主动犯这个错误，但很多时候，一不小心可能就会修改了原来的对象，例如：var newObj = obj; newObj.xxx = xxx 实际上，这个时候newObj和obj两个引用指向的是同一个对象，我修改了newObj，实际上也就等同于修改了obj，这，就是我和深浅拷贝的第一次相遇。