【HTML+CSS+JS】自制一个简易的鼠标点击特效-文章-bci9

【HTML+CSS+JS】自制一个简易的鼠标点击特效

[标签] js 代码特效前端
2022-07-04

<html>
<head></head>
<body id=body></body>
</html>
<script>
var s=[
	"富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"
];
var n=0;
var k;
document.onclick=key;
function key(){
	k=document.createElement("span");
	k.innerText=s[n];
	n++;
	if(n==12){
		n=0;
	}
	x=window.event.x;
	y=window.event.y;
	k.setAttribute("style","position:absolute;top:"+y+"px;left:"+x+"px;opacity:1;");
	document.getElementById("body").appendChild(k);
	i=0;
	var l=self.setInterval(function(){k.setAttribute("style","position:absolute;top:"+(y-i)+"px;left:"+x+"px;opacity:"+(1-(i/20))+";");i++;if(i>=20){k.setAttribute("style","position:absolute;top:"+(y-i)+"px;left:"+x+"px;opacity:0;");document.getElementById("body").removeChild(k);window.clearInterval(l);}},15);
	
}
function ds(){
	k.setAttribute("style","position:absolute;top:"+(window.event.y-10)+"px;left:"+window.event.x+"px;");
}
</script>