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

``` <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> ```

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

评论