效果图，用的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. linux安装软件时/usr/lib/python2.7/site-packages/urlgrabber/grabber.py文件异常

    linux安装软件时,经常出现以下异常信息 Traceback (most recent call last): File , in <module> main() File , in m ...

  2. DownloadManager系统自带下载实现apk后台下载功能

    DownloadManager是android2.3以后,系统下载的方法,是处理长期运行的HTTP下载的系统服务.客户端可以请求的URI被下载到一个特定的目标文件.客户端将会在后台与http交互进行下 ...

  3. silverlight开发实例（Prism+MVVM+RIA）（二）--创建shell及用户登录

    在上篇基本说清了本项目的基本框架,下面开始说下项目的加载和shell.开始之前在建立EF时出现了一个问题,我在数据库中建立了视图,而在EF导入视图时出现因无法匹配主键导致无法导入视图的问题,检查发现是 ...

  4. centos 7 删除 virbr0 虚拟网卡

    出现虚拟网卡是因为安装时启用了 libvirtd 服务后生成的关闭方法virsh net-list名称               状态     自动开始  持久------------------- ...

  5. Linux scp 免密码 传输文件

    Linux scp 免密码 传输文件 背景介绍 最近项目是集群化部署(由 node1,node2,node3 三台 CentOS 7.4 的虚拟机构成). 但是,涉及到跨机器同步文件的问题,想通过写s ...

  6. MongoDB数据库数据清理

    清理MongoDB集群数据: 1.登录MongoDB集群(mongos): # mongo -u username -p password --authenticationDatabase admin ...

  7. body和document的梗

    http://bbs.zhinengshe.com/thread-1199-1-1.html 1. 在空白的页面加点击事件,是加在body上么 ? <!DOCTYPE html> < ...

  8. Django-ORM之ForeignKey的使用-多对一关系

    ForeignKey使用俩表示两张表多对一关系的外键,外键字段要定义在多属性的表中. 定义外键时,to的表可以直接写类名,但是需要注意类的定义顺序:也可以写字符串式的类名,这样就可以忽略class类的 ...

  9. Kinect数据

    原文链接 Kinect V1 和 V2 比较 Kinect V1 和 V2 的外观比较 Kinect V1 和 V2 的参数比较 Kinect V1 和 V2 随距离增加的误差分布 Kinect V1 ...

  10. virtualenv以及virtualenvwrapper的安装和使用

    Virtualenv 安装 安装前最好保证pip为最新版本: python -m pip install -U pippip install virtualenv 创建新的环境 virtualenv ...