一个有意思的鼠标点击文字特效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 ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery添加div实现消息聊天框
Feb 08 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文本数据库的搜索方法
2006/10/09 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
javascript 打印页面代码
2009/03/24 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
新手学python应该下哪个版本
2020/06/11 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Python 求向量的余弦值操作
2021/03/04 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
.net面试题
2016/09/17 面试题
学生会竞选自荐信
2013/10/12 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
采购部部门职责
2013/12/15 职场文书
大二学习计划书范文
2014/04/27 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
未婚证明格式
2015/06/15 职场文书
学生安全责任协议书
2016/03/22 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
MySQL 原理与优化之Update 优化
2022/08/14 MySQL