失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jquery代码实现鼠标点击文字有趣特效

jquery代码实现鼠标点击文字有趣特效

时间:2020-02-03 08:51:34

相关推荐

jquery代码实现鼠标点击文字有趣特效

web前端|js教程

jquery,点击,鼠标

web前端-js教程

本文主要介绍了一个有意思的鼠标点击文字特效jquery代码,需要的朋友可以参考下,希望能激发大家的兴趣,用jQuery实现一个有趣的点击特效。

h5在线考试源码,ubuntu账户密码忘记,tomcat工作原理及调优,python爬虫挖数据,面试php技术总监交流,seo中外链lzw

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

hc微信支付源码,vscode显示错误窗口,ubuntu安装code,加密tomcat登录密码,sqlite3取前十条,爬虫书评,香港php免费空间,海南seo优化怎么选,网站正在建设页面模板,仿a5论坛模板lzw

图书借阅管理源码 php,控制声音大小 ubuntu,tomcat是否进行过调优,vba高级爬虫,php表单价格计算源码,建飞seolzw

只需将如下JS代码放到之前即可。

/* 鼠标特效 */var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("").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(); }); });});

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

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

html中由元素上的鼠标点击触发的事件属性onclick

JS鼠标点击事件的实现

jQuery如何实现鼠标点击左右按钮滑动切换的示例

如果觉得《jquery代码实现鼠标点击文字有趣特效》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。