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


Posted in jQuery onSeptember 23, 2017

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

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

只需将如下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 里都失效了,郁闷呀!

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

jQuery 相关文章推荐
Jquery把获取到的input值转换成json
May 15 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 #jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
You might like
php 面向对象的一个例子
2011/04/12 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python实现三种随机请求头方式
2021/01/05 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
大学生创业项目方案
2014/03/08 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
思想品德评语大全
2014/12/31 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Java死锁的排查
2022/05/11 Java/Android