WordPress鼠标点击显示字体特效,这个特效代码是我逛博客无意间看到的特效,本人感觉鼠标点击显示字体效果还是不错的所以就分享给大家使用,拽立网,默认为红色字体效果,支持自定义修改文字和颜色,今天我把WordPress鼠标点击显示字体特效方法分享给大家,请看以下操作!

添加的效果图:

WordPress鼠标点击显示字体特效

WordPress鼠标点击显示字体特效

第一种:把下面全部代码添加在【header.php】或着【footer.php】

1.直接复制下面全部代码:

<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": 99999,
"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>

第二种:如果想要添加到【JS】文件里去,就复制以下全部代码:

/*-------------------------------------------------*/
/* 鼠标点击显示字体特效!
/*-------------------------------------------------*/
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": 99999,
"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鼠标点击显示字体特效》 » 本文地址:《http://www.zlinet.com/11203.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^