不知大家有没有看到过别人的博客页面，鼠标每一次点击都会有文字出来然后慢慢移动消失，是不是觉得很炫酷，下面就带着大家给自己的博客添加这种效果。
首先，打开正在使用主题中的footer.php文件
复制下面的代码，然后放在

<?php wp_footer(); ?>

的上面，注意不要放错位置。（在最下面）

<script>
	/* 鼠标特效 */
	/* 站点：执念博客
	   作者：执念
	   网址：https://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>

保存之后打开自己的网站，发现是不是随着鼠标点击就会出现你设置的文字了。

 
 

赏

微信扫一扫，打赏作者吧～