效果图，用的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. JDBC——数据库连接池以及JDBC代码模版模版

    该代码模版由三部分组成,一个是数据库连接池,一个是数据库常用操作的模版抽象,还有一个是重写的连接对象,主要重写关闭连接的方法,将其改为释放到连接池. OolongConnectionPool.java ...

  2. DP&图论 DAY 2 下午

    DP&图论  DAY 2  下午 基础树形DP 前言◦ 1:与树或图的生成树相关的动态规划.◦ 2:以每棵子树为子结构,在父亲节点合并,注意树具有天然的子结构.这是很优美的很利于dp的.◦ 3 ...

  3. ubuntu最近升级到最新的linux内核后，网络无法使用怎么办？

    答:进入旧的内核中编译需要的网卡模块 1. 启动旧的内核进入系统 2. 安装新内核源码 3. 找出当前的网卡型号 4. 尝试卸载某个与网卡相关的内核模块,观察是否影响当前网卡的使用,如果有影响,那么便 ...

  4. 内存或磁盘空间不足,word无法显示所请求的字体

    从百度哪里获得了解决方法,应该是字体没有添加到C盘的fonts目录下面,记录一下解决办法. 在电脑上打开Windows PowerShell ,以管理员身份运行.(可能有的同志不知道怎么以管理员的方式 ...

  5. Spring Data JPA 查询

    1 按照关键字方法名查询 自定义的简单查询就是根据方法名来自动生成SQL,主要的语法是findBy,readABy,queryBy,getBy,countBy后面跟属性名称 findBy,readAB ...

  6. 【.NET】关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...

  7. PJzhang:360压缩的用户许可协议和隐私政策阅读

    猫宁!!! 参考链接:http://yasuo.360.cn/ 当我们安装一个软件,不管是手机上的还是电脑上的,很少会去看它们的用户许可协议和隐私政策,而有的时候软件甚至都不提醒我们还有用户许可协议和 ...

  8. @ComponentScan 注解

    在配置类上添加 @ComponentScan 注解.该注解默认会扫描该类所在的包下所有的配置类,相当于xml的 <context:component-scan>. @ComponentSc ...

  9. github 上传大文件100MB姿势

    最新想把写一个一键配置Linux的脚本,所以就要安装一些软件咯,但是把有时候有源码安装比较好,而且有些东西直接传到Github会很方便,可又超过了100MB,Github正常情况下是不允许上传超过10 ...

  10. 【VS开发】OutputWnd自动滚动

    最近在尝试VS2010中的各种新鲜插件,首先从最简单的输出窗口入手. VS2010向导中产生的输出窗口是通过CMainFrame中的COutputWnd类的对象m_wndOutput生成的.为了向输出 ...