一个有意思的鼠标点击文字特效jquery代码

今天在【幻想's Blog】看到一段比较喜欢的鼠标点击文字特效JS代码，感觉很不错就用到博客上来了！喜欢的站长也可以用一下感觉一下！

只需将如下JS代码放到</body>之前即可。

<script type="text/javascript">
/* 鼠标特效 */
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": 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>

不知道为啥， WordPress 可以使用的JS代码放到 Typecho 里都失效了，郁闷呀！

这个效果一般大网站就不用了，一般用于个人博客还是不错的。

赞 (0)

相关推荐

  • 一个有意思的鼠标点击文字特效jquery代码

    一个有意思的鼠标点击文字特效jquery代码

    今天在[幻想's Blog]看到一段比较喜欢的鼠标点击文字特效JS代码,感觉很不错就用到博客上来了!喜欢的站长也可以用一下感觉一下! 只需将如下JS代码放到</body>之前即可. <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a =

  • Javascript实现鼠标点击冒泡特效

    Javascript实现鼠标点击冒泡特效

    本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下 一个用JS写的鼠标左击特效 点击鼠标左键会出现红心"❤"或者字符表情"(๑•́ ₃ •̀๑)"- 常用Emoji 可以自行替换,如需复制,请从底部链接移步至Github 代码 onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $

  • JS实现在线统计一个页面内鼠标点击次数的方法

    本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • Android TextView中文本点击文字跳转 (代码简单)

    Android TextView中文本点击文字跳转 (代码简单)

    在web页面中,有a标签的超链接实现跳转,同样在Android当中,用TextView控件来显示文字,实现它的事件来跳转. 用过微博Android手机端的朋友的都知道微博正文有时有一些高亮显示的文本,如话题.提到的人等等,当点击这些文本时会跳到另外一个页面(即另一个activity),下面就要来模仿微博的这个功能 点击#hello# 点击@人 一.新建一个名为WeiboContentTest的工程 二.在布局文件中添加一个textview 三.在mainactivity中创建该textview

  • javascript获取鼠标点击元素对象(示例代码)

    IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标. HTML:onclick="gj(event)" JS: 复制代码 代码如下: function gj(event){ var b=objobj=document.elementFromPoint(event.clientX,event.clientY);}

  • javascript实现鼠标点击生成文字特效

    javascript实现鼠标点击生成文字特效

    前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅 前言 最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则 新版本 1.筛选了多种好看的颜色样式 2.复制代码到

  • JavaScript实现鼠标点击导航栏变色特效

    废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • wx.CheckBox创建复选框控件并响应鼠标点击事件

    wx.CheckBox创建复选框控件并响应鼠标点击事件

    本文实例为大家分享了wx.CheckBox创建复选框控件并响应鼠标点击事件的具体代码,供大家参考,具体内容如下 执行效果图: 执行代码: #!/usr/bin/env python # -*-encoding:utf-8 -*- 'Crteate CheckBox Example' import wx class MyFrame(wx.Frame): #子类化框架对像 def __init__(self,parent,id): #定义子类构造器 wx.Frame.__init__(self,pa

  • Unity实现移动物体到鼠标点击位置

    本文实例为大家分享了Unity实现移动物体到鼠标点击位置的具体代码,供大家参考,具体内容如下 目的: 移动物体到鼠标点击处屏幕所对应的空间位置,并使物体正对着点击的对象,不能倾斜. 首先,需要获取点击屏幕所对应的空间位置,这可以通过先获取屏幕坐标,然后转成空间坐标:也可以通过射线直接获取到空间位置. 其次 ,移动物体到目的地,可直接通过差值进行移动,使物体看向目标点,不能直接使用LookAt(),因为,该函数是使物体的前方面向目标点(即物体的forward指向 由物体到目标点的向量,这可能使物体

随机推荐