前面我们谈到了漂浮磁力线/鼠标吸铁石特效你也可以实现,现在来聊聊点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果的实现,这两个小技巧的小心机都是吸引访客在页面的停留时间,感兴趣的朋友可以试试,这个特效只需要复制 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. maven project 报错解决方法

    1 maven 在添加包后出错,project 处有红线的解决办法 Maven默认会使用本地缓存的库来编译工程,对于上次下载失败的库,maven会在~/.m2/repository/<group ...

  2. JVM类加载机制与反射-转

    一.Java类加载机制 1.概述 Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息:如构造函数,属性和方法等,Java允 ...

  3. Python的浮点数损失精度问题

    本篇讨论的现象可以从下面这段脚本体现出来: >>> x = 0.0 >>> for i in range(10): x += 0.1 print(x) 0.1 0. ...

  4. 程序猿必备的8款web前端开发插件三

    1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...

  5. 【iCore4 双核心板_FPGA】实验十九:使用JTAT UART终端打印信息

    实验指导书及源代码下载地址: 链接:https://pan.baidu.com/s/1c3mqDkW 密码:4x9h iCore4链接:

  6. Web 呼起 APP

    1. iOS iOS 9+,用 universal links,可以在微信和 safari 中呼起 APP,并定位到指定 View iOS 8-,用 iframe + scheme,在微信中不可以呼起 ...

  7. Java窗体居中显示的2种方法

    第1种方法: //setSize(300, 200); pack(); // 得到显示器屏幕的宽.高 int width = Toolkit.getDefaultToolkit().getScreen ...

  8. hadoop 动态调整mapred参数

    bin/hadoop job -set-reduce-capacity job_20151126032920_1142443 1000 调成map数 bin/hadoop job -set-prior ...

  9. [springBoot系列]--springBoot注解大全[转]

    一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration ...

  10. K好数(DP)

    问题描写叙述 假设一个自然数N的K进制表示中随意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数. 求L位K进制数中K好数的数目. 比如K = 4,L = 2的时候.全部K好数为11.13.2 ...