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

博客后台管理设置

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<script type="text/javascript">

var index = 0;                            //全局索引

var colorIndex = 0;

$(document).ready(function() {

    $("body").click(function(e) {         //鼠标点击事件

        var arr = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");

        var colorArr = new Array("red", "orange", "yellow", "green", "blue", "indigo", "purple");

        var tmp = $("<span/>").text(arr[index]);    //添加一个span标签显示arr数组对应的第一个索引内容

        index = (index + 1) % arr.length;           //取余,从0到arr数组长度，一直点击一直循环

        var color = colorArr[colorIndex];

        colorIndex = (colorIndex + 1) % colorArr.length;

        var x = e.pageX, y = e.pageY;   //鼠标点击的x,y点坐标

        tmp.css({

            "z-index" : 999,            //堆叠顺序，越大越优先显示

            "top" : y - 20,             //y点坐标往上20像素

            "left" : x,                 //x点坐标

            "position" : "absolute",    //绝对定位

            "font-weight" : "bold",     //加粗

            "color" : color,            //颜色

            "font-size" : 20            //字体大小

        });

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

        tmp.animate({                   //自定义动画,样式--时间--功能

            "top" : y - 200,            //y点坐标往上200像素

            "opacity" : 0               //饱和度,0即是透明了

        }, 2000, function() {           //2000毫秒

            tmp.remove();               //消失

        });

    });

});

</script>

<title>Insert title here</title>

</head>

<body>

    <div style="width:1000px;height:1000px"></div>

</body>

</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. MySQL5.7快速修改表中字段长度

    在mysql 5.5版本时,商用环境升级,有一个表存在六千多万数据,升级时需要修改这个表其中一个varchar类型字段的长度,当时用了大概4个多小时,还没有结束,之后我们系统mysql升级到5.7版本 ...

  2. Mysql 纪录用户操作日志

    有时,我们想追踪某个数据库操作记录,如想找出是谁操作了某个表(比如谁将字段名改了). 二进制日志记录了操作记录,线程号等信息,但是却没有记录用户信息,因此需要结合init-connect来实现追踪. ...

  3. Linux上安装Python3

    1. 安装支持包 yum -y groupinstall "Development tools" yum -y install zlib-devel bzip2-devel ope ...

  4. LC 652. Find Duplicate Subtrees

    Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...

  5. javascript之日期对象（Date）

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

  6. 小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_45、SpringBoot2.x日志讲解和Logback配置实战

    笔记 2.SpringBoot2.x日志讲解和自定义Logback配置实战     简介:讲解SpringBoot2.x整合Logback配置实战 1.官网介绍:https://docs.spring ...

  7. 阶段3 3.SpringMVC·_06.异常处理及拦截器_6 SpringMVC拦截器之拦截器入门代码

    创建拦截器 新建包 实现拦截器的接口 接口中没有强制实现里面的方法.jdk1.8的特性.接口中已经实现了方法 这就是相当于实现了这个接口.方法已经全帮你实现过了. 如果想去写新的实现方法.Ctrl+o ...

  8. FAQ_1

    FAQ LoadRunner录制脚本时为什么不弹出IE浏览器? 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到不能打开浏览器的情况,可以用下面的方法来解决. 启动浏览器,打开Int ...

  9. Hibernate5 Guide

    (1) 创建Maven工程 可以使用Eclipse或IDEA创建 (2) 修改pom文件 <project xmlns="http://maven.apache.org/POM/4.0 ...

  10. 【D3D12学习手记】4.3.8 Create the Depth/Stencil Buffer and View

    我们现在需要创建深度/模板缓冲区. 如§4.1.5所述,深度缓冲区只是一个2D纹理,用于存储最近的可见对象的深度信息(如果使用模板(stencil),则也会存储模板信息). 纹理是一种GPU资源,因此 ...