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

    本章内容: 1.源码 InterfaceStability 类包含三个注解,用于说明被他们注解的类型的稳定性. /** * Annotation to inform users of how much ...

  2. 简单理解PHP-FPM

    php-fpm只是一个php-fastcgi的管理器,为php提供管理服务 1.为什么会出现php-fpm    fpm的出现全部因为php-fastcgi出现,为了很好的管理php-fastcgi而 ...

  3. “The subscription does not exist” when a distributor primary replica fails over to a replica that does not use the same agent profile

    Symptoms Consider the following scenario: In Microsoft SQL Server 2017, you have a distribution agen ...

  4. mysql知识汇总

    一.数据类型介绍 数据类型 字节长度 范围或用法 bigint 8 无符号[0,2^64-1],有符号[-2^63 ,2^63 -1] binary(M) M 类似Char的二进制存储,只包含byte ...

  5. [转]MySQL中timestamp数据类型的特点

    原文地址:https://www.imooc.com/article/16158 在使用MySQL数据库时有很多常见的误解,其中使用int类型来保存日期数据会提高数据读取的效率就是比较常见的一个误解. ...

  6. opencv wlsfilter depth refinement demo

    参考 https://docs.opencv.org/3.2.0/d3/d14/tutorial_ximgproc_disparity_filtering.html // This file is p ...

  7. Direct3D 11 Tutorial 3: Shaders and Effect System_Direct3D 11 教程3:着色器和效果系统

    概述 在上一个教程中,我们设置了一个顶点缓冲区并将一个三角形传递给GPU. 现在,我们将逐步完成图形管道并查看每个阶段的工作原理. 将解释着色器和效果系统的概念. 请注意,本教程与前一个源代码共享相同 ...

  8. [ java 工具类] xml字符串解析成Map(DOM解析)

    package com.tencent.jungle.wechat.util; import com.google.inject.Singleton; import org.w3c.dom.Docum ...

  9. open-falcon实现邮件报警

    1.请安装好Go的环境,参考上一篇open-falcon的安装博文 2.安装 mail-provider https://github.com/open-falcon/mail-provider 安装 ...

  10. Django 跨域问题

    当使用Django 做接口时,被html5 或者app访问时 存在跨域问题 导致无法请求到数据,具体解决办法如下: 跨域问题解决 安装pip install django-cors-headers修改 ...