搜索到
1
篇与
的结果
-
wordpress鼠标点击特效 不知大家有没有看到过别人的博客页面，鼠标每一次点击都会有文字出来然后慢慢移动消失，是不是觉得很炫酷，下面就带着大家给自己的博客添加这种效果。首先，打开正在使用主题中的footer.php文件复制下面的代码，然后放在[code lang="php"]<?php wp_footer(); ?>[/code]的上面，注意不要放错位置。（在最下面）[code lang="js"]<script> /* 鼠标特效 */ /* 站点：梦屿博客 作者：梦屿 网址：https://blog.mengyu.ltd */ 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]保存之后打开自己的网站，发现是不是随着鼠标点击就会出现你设置的文字了。