JavaScript实现鼠标点击效果


直接上效果

代码如下


<script>
 /* 鼠标特效 
 站点:Net-X https://netx.xin
 作者:Jung 基于执念
 */
 
 
 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("NetX大法好","富强", "民主","文明","和谐","自由","平等","公正","法制","爱国","敬业","诚信","友善");
 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>

放在WordPress的footer.php下

注意不要放在<?php 和 ?>之间

声明:Net-X|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - JavaScript实现鼠标点击效果


Carpe Diem and Do what I like