wordpress鼠标点击特效

点击广告查看隐藏内容....

不知大家有没有看到过别人的博客页面，鼠标每一次点击都会有文字出来然后慢慢移动消失，是不是觉得很炫酷，下面就带着大家给自己的博客添加这种效果。
首先，打开正在使用主题中的footer.php文件
复制下面的代码，然后放在
[code lang="php"]
<?php wp_footer(); ?>
[/code]
的上面，注意不要放错位置。（在最下面）
[code lang="js"]
<script>
/* 鼠标特效 */
/* 站点：执念博客
作者：执念
网址：http://zhinianboke.com
*/
var a_index = 0;
window.onload=function(){
var bo = document.getElementsByTagName("body")[0];
bo.onclick = function(e){
var e = e || window.event;
var x = e.pageX;
var y = e.pageY;
var a = new Array("执念", "博客");
var span = document.createElement("span");
span.style.position = "absolute";
span.style.top = y+"px";
span.style.left = x+"px";
span.style.opacity = 1;
span.style.zIndex = 99999999;
span.innerHTML = a[a_index];
a_index = (a_index+1)%a.length;
span.style.color = "red";
bo.appendChild(span);
animation(span,"opacity",0,2000);
var top = parseInt(getStyle(span,"top"));
animation(span,"top",top-200,2000);
function animation(obj,attr,value,time){
var nowTime = new Date();
var nowStyle = parseInt(getStyle(obj,attr));
var timer = setInterval(function(){
var n = (new Date() - nowTime)/time;
if(n>=1){
n=1;
removeElement(span);
clearInterval(timer);
}
if(attr=="opacity"){
obj.style[attr]=(nowStyle+n*(value-nowStyle));
}
obj.style[attr]=(nowStyle+n*(value-nowStyle))+"px";
},1000/60);
}
function getStyle(obj,attr){
//获得元素的属性
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function removeElement(obj){
//删除节点
var parentElement = obj.parentNode;
if(parentElement){
parentElement.removeChild(obj);
}
}
}
}
</script>
[/code]
保存之后打开自己的网站，发现是不是随着鼠标点击就会出现你设置的文字了。

点击广告查看隐藏内容....