js / wordpress / 技巧

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>


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

声明:版权所有,盗版必究  执念博客

转载:转载请标明原文链接,谢谢合作

本站如未特别声明,所有压缩文件解压密码均为:www.zhinianblog.com

Author

zhinianblog@163.com

Comments

2017年9月17日 at 下午9:33

你博客上的爱心和星星也是这么弄出来的么



发表评论

ip伪造

2017年9月15日

虚拟主机多站点配置

2017年9月17日