鼠标点击自定义文字展现特效JS代码
JS特效使用方法
只需将如下JS代码放到</body>之前就好了
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
鼠标点击自定义文字展现特效JS代码的更多相关文章
- 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)
鼠标点击输入框文字消失 value实现方法 placeholder实现方法 以及JQ实现placeholder效果 <input type="text" value ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- JavaScript001,鼠标点击改变文字或图片
<h3>我的第一个Javascript</h3> <p id="demo1">1.点击按钮,改变内容!</p> <!-- 设置 ...
- 页面点击关闭弹出提示js代码
代码效果为: <script> window.onbeforeunload = function() { return "您好!\n我是abc\n —————————————— ...
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
- 如何最快速的找到页面某一元素所绑定的点击事件,并查看js代码
https://blog.csdn.net/jmd88888888/article/details/70919378
- 判断点击第几个按钮JS代码的三种方法
方法一:使用下标实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序
1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...
随机推荐
- beego conf配置文件
1. 多个配置文件通过include引入 自定义配置文件mysql.conf 在app.conf 中引入mysql.conf include "mysql.conf"
- Spring 控制器层如何调用DAO层
1.写上注解 @Autowired 2.声明一个变量 private UserDao userDao; 3.注意!Spring里面数据库对象操作类不需要实例化就能调用
- 第07组 Alpha冲刺(1/4)
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...
- 使用Dreamweaver制作简单网站
上课过程中有的同学反应没有听懂,特写此博客,将dreamweaver使用过程,细化到每一步,跟着做就行. 一.安装dreamweaver. 1.dreamweaver免安装版下载地址 链接:https ...
- luogu P3031 [USACO11NOV]高于中位数Above the Median (树状数组优化dp)
链接:https://www.luogu.org/problemnew/show/P3031 题面: 题目描述 Farmer John has lined up his N (1 <= N &l ...
- AndroidStudio下载安装教程(图文教程)
场景 Android Studio 中文社区: http://www.android-studio.org/ 下载安装包,这里选择64位Windows 等待下载完成. 注: 博客: https://b ...
- [转帖]Google Chrome 解决 “您的连接不是私密连接”
Google Chrome 解决 “您的连接不是私密连接” 和被毒霸劫持 自己搭建了 k8s的 dashboard 结果 chrome 最新版本的打不开了.. 百度了下 园友的解决方案很完美 这里面转 ...
- #【Python】【基础知识】【内置对象常用方法】
数字 数字的常用方法: >>> dir(int) ['__abs__', '__add__', '__and__', '__bool__', '__ceil__', '__class ...
- [转帖]龙芯:Docker 配置与实践清单
Docker 配置与实践清单 http://www.sohu.com/a/254904706_198222 文章对来官方文档及 Docker Links[1] 中链接内容进行归档整理,包含了日常工作中 ...
- PowerShell使用Clear-Content命令删除、清空文件内容的例子
本文介绍PowerShell中如何将文件的内容进行删除或清空,使用VBScript要先创建FSO,然后再打开文件,再修改文件:PowerShell清空文件只要一句Clear-Content. 所谓清空 ...