效果图，用的faststone--录像--togif，黄色圆圈实际是不显示的

博客后台管理设置

本地新建一个demo.html文件，可以自行测试，要引入jquery文件哦

来个“红橙黄绿蓝靛紫”的点击特效

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  6. <script type="text/javascript">
  7. var index = 0;                            //全局索引
  8. var colorIndex = 0;
  9. $(document).ready(function() {
  10.     $("body").click(function(e) {         //鼠标点击事件
  11.         var arr = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
  12.         var colorArr = new Array("red", "orange", "yellow", "green", "blue", "indigo", "purple");
  13.         var tmp = $("<span/>").text(arr[index]);    //添加一个span标签显示arr数组对应的第一个索引内容
  14.         index = (index + 1) % arr.length;           //取余,从0到arr数组长度，一直点击一直循环
  15.         var color = colorArr[colorIndex];
  16.         colorIndex = (colorIndex + 1) % colorArr.length;
  17.         var x = e.pageX, y = e.pageY;   //鼠标点击的x,y点坐标
  18.         tmp.css({
  19.             "z-index" : 999,            //堆叠顺序，越大越优先显示
  20.             "top" : y - 20,             //y点坐标往上20像素
  21.             "left" : x,                 //x点坐标
  22.             "position" : "absolute",    //绝对定位
  23.             "font-weight" : "bold",     //加粗
  24.             "color" : color,            //颜色
  25.             "font-size" : 20            //字体大小
  26.         });
  27.         $("body").append(tmp);
  28.         tmp.animate({                   //自定义动画,样式--时间--功能
  29.             "top" : y - 200,            //y点坐标往上200像素
  30.             "opacity" : 0               //饱和度,0即是透明了
  31.         }, 2000, function() {           //2000毫秒
  32.             tmp.remove();               //消失
  33.         });
  34.     });
  35. });
  36. </script>
  37. <title>Insert title here</title>
  38. </head>
  39. <body>
  40.     <div style="width:1000px;height:1000px"></div>
  41. </body>
  42. </html>

js鼠标点击特效，有关参数设置的更多相关文章

  1. cnblogs鼠标点击特效

    喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...

  2. [JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值

    在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦 可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能 下面以asp.net代 ...

  3. WordPress鼠标点击特效和粒子插件

    鼠标特效 将下面代码复制到外观-主题编辑器-主题页脚(footer.php)代码<?php wp_footer(); ?>上方. <script type="text/ja ...

  4. Canvas鼠标点击特效（富强、民主...）、收藏

    <script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...

  5. js鼠标点击版tab切换

    代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...

  6. 小程序点击事件改变样式(普通js鼠标点击事件)

    1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...

  7. JS鼠标吸粉特效

    HTML <canvas id=canvas></canvas> CSS * { margin: 0; padding: 0; } html { overflow: hidde ...

  8. js window.open 打开新窗体 参数设置

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

  9. js 鼠标点击文本框 提示文字消失

    onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...

随机推荐

  1. JS遍历OCX方法

    /----查看OCX组件的属性 <html> <head> <title>OCX</title> <meta http-equiv="C ...

  2. php执行方式对比：mod_php&php-fpm

    mod_php 1.是apache的附属包,apache死掉后php也会死掉 2.稳定性差,php出错服务器进程也会受影响 php-fpm       1.和nginx是两个独立的个体. 2.php- ...

  3. ACCESS_ONCE的作用

    如果你看过 Linux 内核中的 RCU 的实现,你应该注意到了这个叫做 ACCESS_ONCE() 宏. ACCESS_ONCE的定义如下: #define __ACCESS_ONCE(x) ({ ...

  4. LC 272. Closest Binary Search Tree Value II 【lock，hard】

    Given a non-empty binary search tree and a target value, find k values in the BST that are closest t ...

  5. Appium移动自动化测试(四)之元素定位

    做过UI自动化测试的童鞋都会发现, 在上一篇文章中居然没有万能定位方式Xpath. 是滴, 确实没有! ADT自带的uiautomatorviewer里面并没有属性xpath, 如果我们需要的话,还需 ...

  6. 12@365 java上传文件（word、图片等）至服务器

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  7. golang(07)结构体介绍

    golang支持面向对象的设计,一般支持面向对象的语言都会有class的设计,但是golang没有class关键字,只有struct结构体.通过结构体达到类的效果,这叫做大成若缺,其用不弊. stru ...

  8. Docker学习笔记 — Docker私有仓库搭建

    Docker学习笔记 — Docker私有仓库搭建   目录(?)[-] 环境准备 搭建私有仓库 测试 管理仓库中的镜像 查询 删除 Registry V2   和Mavan的管理一样,Dockers ...

  9. 组件推荐Forloop.HtmlHelpers 用来实现MVC的js加载顺序

    最近在开发的时候遇到js加载顺序的问题,layui在底部声明了js,但是我想在页面其他地方使用分布视图,分布视图内有自己的js逻辑,发现不能执行,一看就发现,这里的js应该加在layui后面执行才能有 ...

  10. 队列：Beanstalkd介绍

    一:介绍 Beanstalkd 是一个轻量级的内存型队列.它是典型的类Memcached设计,协议和使用方式都是同样风格.github:https://github.com/beanstalkd官网: ...