前面我们谈到了漂浮磁力线/鼠标吸铁石特效你也可以实现,现在来聊聊点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果的实现,这两个小技巧的小心机都是吸引访客在页面的停留时间,感兴趣的朋友可以试试,这个特效只需要复制 JS 代码就可以。代码如下:

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("自信", "自强", "坚持", "ytkah", "Laravel", "Wordpress", "公众号", "小程序", "ERP", "CRM", "帝国cms" ,"Python", "Magento", "Dedecms", "Linux", "CI", "Thinkphp");
      /* 可想而知,这里可以修改显示的字 */
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": 999999999999999999999999999999999999999999999999999999999999999999999,
"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();
});
});
});
</script>

  保存之后就能看到博客中出现效果了。当然那些文字都是可以修改的,比如改成:富强、民主、文明...发挥自己的天才想象力吧!

点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果实现的更多相关文章

  1. 点击鼠标获取元素ID

    原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private ...

  2. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  3. SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error

    SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...

  4. Winform 基础二 最小化 最大化 关闭 点击任务栏隐藏显示 点击鼠标左键移动窗体

    一 最大化 二 最小化 三 关闭 四 点击任务栏隐藏显示 五 点击鼠标左键移动窗体 六 阴影效果鼠标左键移动窗口 #region UI设置 最大化.最小化.关闭.鼠标移动窗口.点击任务栏切换窗口 th ...

  5. 联想E440问题:点击鼠标时,弹出“无法连接synaptics定点装置驱动程序”错误

    笔记本:Levono E440   问题描述: 在控制面板中,点击鼠标时,弹出“无法连接synaptics定点装置驱动程序”错误,如何解决? 即使在安装联想的驱动后,也没办法解决   解决步骤: 1. ...

  6. iOS Xcode 小技巧,提升理解查询能力,Command + 点击鼠标右键 Jump to Definition等

    前言: 介绍下Xcode 小技巧,以及一下快捷键,让你调试程序更加出类拔萃,安排! Command + 点击鼠标右键 Jump to Definition,可能你平时也在用,但是你明白全部的用法吗,试 ...

  7. Pycharm用鼠标滚轮控制字体大小的

    Pycharm用鼠标滚轮控制字体大小的   一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...

  8. 点击鼠标右键弹出错误提示:CrashHandler initialization error

    电脑重装系统后,什么都没有了,重装部分必须用的软件后,不管是在桌面还是在文件夹中,当点击鼠标右键时,总是弹出错误,如下图所示: 上网找解决方法,也没有找到,但是看错误,是与SVN有关. 产生原因:To ...

  9. (转)Pycharm用鼠标滚轮控制字体大小

    转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...

随机推荐

  1. Atitit uke公司简介与基本制度建设草案v11 r66 .docx

    Atitit uke公司简介与基本制度建设草案v11 r66 .docx Uke  org prj Author撰写人: 作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconocl ...

  2. [HBase Manual]CH5 HBase运行模式:单实例和分布式

    HBase运行模式:单实例和分布式 HBase运行模式:单实例和分布式 1.单实例模式 1.1 单实例在HDFS下 2.分布式 2.1 伪分布式 3完全分布式 HBase有2种运行模式,单实例和分布式 ...

  3. bat搜集

    1. 删除文件夹下指定名称的所有子文件夹 @echo off ::设置要保留的文件夹名,多个文件夹之间用英文逗号隔开,如果包含空格或英文逗号,英文&以及其它一些特殊字符的名字,请把该完整名字用 ...

  4. Nginx+Keepalived+Tomcat高可用负载均衡,Zookeeper集群配置,Mysql(MariaDB)搭建,Redis安装,FTP配置

    JDK 安装步骤 下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html rpm ...

  5. 最新最全的Java面试题整理(内附答案)

    Java基础知识篇 面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发, ...

  6. [pig] pig 基础使用

    1.pig运行模式 本地模式: pig -x local 直接访问本地磁盘 集群模式: pig  或者 pig -x mapreduce 2.pig latin 交互 帮助信息 help 上传本地文件 ...

  7. Linux 依据关键字查找正在运行的进程

    ps aux |grep tm1s

  8. 域渗透分析神器BloodHound

    一.安装过程: 1.首先安装JDK,要求是JDK8 JDK8下载地址 windows下按照提示自动安装好久可以了 2.安装neo4j neo4j图数据库下载地址 下载好后,进入对应的目录在命令行运行如 ...

  9. ubuntu 14.04 安装python包psycopg2

    http://stackoverflow.com/questions/28253681/you-need-to-install-postgresql-server-dev-x-y-for-buildi ...

  10. poj 1556

    哦天哪这个萨比提又浪费了我好几个小时. 我们在check的时候只考虑严格相交就行了,想了很久才注意到这一点. 然后就建图跑最短路,over. #include <cstdio> #incl ...