1. 陈健豪博客首页
  2. 建站

WordPress网站添加鼠标点击出现文字上升特效

效果介绍

相信不少朋友进来本站点击鼠标左键或者点击链接时会出现“富强、民主、文明、和谐、自由”等多个词汇的文字上升效果(当然您也可以现在试一试,点击几下鼠标查看效果),那么这种效果是怎么实现的呢?今天就给大家分享一下这种特效的实现方法。

当然细心的朋友还会发现本站鼠标指针样式也变了,想要实现这种效果?请查看《利用CSS来改变网站鼠标指针的样式》这篇文章。

实现方法

只要将以下代码添加到网站的主题文件footer.phpbody标签前面,文件保存,然后刷新页面即可查看效果。如果不行请试一试键盘ctrl+f5按键快速清理浏览器缓存即可。

<!--鼠标点击文字上升效果-->
<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": 9999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "red"
});
$("body").append($i);
$i.animate({
"top": y - 80,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--鼠标点击文字上升效果-->

小提示:

  • 可能有朋友会说这样会影响页面的加载速度,对于这一点,我认为这个影响不大,比较喜欢这个特效的朋友可以放心添加。
  • 上面代码中的文字“富强、民主、文明、和谐、自由……”可更改为自己喜欢的字体。
  • 上面代码中的字体CSS样式可根据自己的喜好进行更改。

版权声明:本文为博主原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://chenjianhao.com/12524.html

发表评论

登录后才能评论