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();
});
});
});

提示:保存后刷新浏览器,鼠标点击是否显示字体特效!

提示:可以自定义字体意义,可以自定义字体颜色!

拽立网
版权声明:本站原创文章,于2017年12月28日 11:20:28,由 拽立网 发表,共 1458 字。
打赏