wordpress鼠标点击特效
不知大家有没有看到过别人的博客页面,鼠标每一次点击都会有文字出来然后慢慢移动消失,是不是觉得很炫酷,下面就带着大家给自己的博客添加这种效果。
首先,打开正在使用主题中的footer.php文件
复制下面的代码,然后放在
<?php wp_footer(); ?>
的上面,注意不要放错位置。(在最下面)
<script> /* 鼠标特效 */ /* 站点:执念博客 作者:执念 网址:http://www.zhinianblog.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>
保存之后打开自己的网站,发现是不是随着鼠标点击就会出现你设置的文字了。
Comments
你博客上的爱心和星星也是这么弄出来的么
是的,只需要将文字换成符号就可以了。我的是搜狗输入法的特殊符号