效果图，用的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. ftp相关

    已经存在虚拟账户 添加新账户 .在/etc/vsftpd/user.txt里面配置用户名密码 单行是用户名 双行是密码 .导入新用户密码 db_load -T -t hash -f /etc/vsft ...

  2. 使用Aria2+Aria2Ng+OneIndex+OneDrive建立不限流量/离线BT下载/在线观看网盘/在线存储分享平台

    获取OneDrive 自行搜索或者宝购买 安装 1.安装宝塔 #Centos系统 yum install -y wget && wget -O install.sh http://do ...

  3. [ASP.NET应用到的时间处理函数]

    第一种形式: System.DateTime.Now.ToString("D");         //2017年6月2日 System.DateTime.Now.ToString ...

  4. 解决 Elasticsearch 超过 10000 条无法查询的问题

    解决 Elasticsearch 超过 10000 条无法查询的问题 问题描述 分页查询场景,当查询记录数超过 10000 条时,会报错. 使用 Kibana 的 Dev Tools 工具查询 从第 ...

  5. 通俗易懂的lambda表达式，不懂来找我！

    lambda是Python编程语言中使用频率较高的一个关键字.那么,什么是lambda?它有哪些用法?网上的文章汗牛充栋,可是把这个讲透的文章却不多.这里,我们通过阅读各方资料,总结了关于Python ...

  6. 【CUDA开发】__syncthreads的理解

    __syncthreads()是cuda的内建函数,用于块内线程通信. __syncthreads() is you garden variety thread barrier. Any thread ...

  7. C++学习笔记-构造函数和析构函数

    构造函数和析构函数是C++的重要组成部分,了解构造函数和析构函数有助于深入了解C++ 构造函数 构造函数产生的原因 在C++中,有时候需要在对象创建的时候初始化数据,如果采用普通函数的话,每次初始化都 ...

  8. luoguP2015（简单树形DP）

    题目链接:https://www.luogu.org/problemnew/show/P2015 题意:给定一颗结点个数为n的树,有n-1条边,每条边有个权值,树根为1.现在给出q <=n,问剪 ...

  9. PTA(Basic Level)1026.程序运行时间

    要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间.这个时间单位是 clock ...

  10. Spring添加声明式事务

    一.前言 Spring提供了声明式事务处理机制,它基于AOP实现,无须编写任何事务管理代码,所有的工作全在配置文件中完成. 二.声明式事务的XML配置方式 为业务方法配置事务切面,需要用到tx和aop ...