效果图，用的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. Docker部署测试

    安装虚拟机 准备一台Centos7的VM,名为Centos7-1 具体过程可以参考: KVM安装 KVM——以桥接的方式搭建虚拟机网络配置 安装Docker 下载rpm包:https://downlo ...

  2. 带事务管理的spring数据库动态切换

    动态切换数据源理论知识 项目中我们经常会遇到多数据源的问题,尤其是数据同步或定时任务等项目更是如此:又例如:读写分离数据库配置的系统. 1.相信很多人都知道JDK代理,分静态代理和动态代理两种,同样的 ...

  3. Android 使用date set命令修改系统时间

    测试环境:android 7.1.1 在adb shell中试图使用 date -s "yyyymmdd.[[[hh]mm]ss]"修改系统系统时间时,会提示 date: Unkn ...

  4. RzPageControl(pagecontrol)实现多标签的动态添加,切换,关闭

    https://blog.csdn.net/pdw2009/article/details/76157651 使用RzPageControl来实现多标签页使用菜单来打开标签页,通过标签页的captio ...

  5. [占位符 &nbsp; ]

    在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符  空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...

  6. java二进制工具

    可以运用jdk工具监控java应用性能,再配合 jmeter 进行了一个长时间的加压,在加压过程中重点关注了系统资源的使用情况 D:\Program Files (x86)\Java\jdk1.8.0 ...

  7. PreparedStatement执行sql語句

    import com.loaderman.util.JdbcUtil; import java.sql.Connection; import java.sql.PreparedStatement; i ...

  8. mysql sql常用语句

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  9. python安装二进制k8s 1.11.0 一个master、一个node 查看node节点是主机名---apiserver无法启动，后来改了脚本应该可以

    一.脚本说明: 本实验中master.node.etcd都是单体. 安装顺序为:先安装test1节点主要组件,然后开始安装test2节点,最后回头把test1节点加入集群中,这样做目的是理解以后扩容都 ...

  10. Winform非UI线程更新UI界面的各种方法小结

    我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在进行异步操作时,经常需要将异步执行的进度报告给用户,让用户知道任务的进度,不至于让用户误认为程序“死掉了”,特别是对 ...