[源码分享]HTML鼠标点击水纹水波效果

今天翻看移动硬盘内容发现之前写的鼠标点击效果。老古董了,有需要的参考下吧。

效果预览图:

HTML鼠标点击水纹水波效果

网页源码:

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>网页</title>
  6.   <style>
  7.     svg{
  8.         background:#eee;
  9.     }
  10.   </style>
  11.  </head>
  12.  <body>
  13.   <svg id="svg" width="500" height="400"></svg>
  14.   <script>
  15.     document.querySelector("svg").onclick=function(){
  16.         var x=event.offsetX;
  17.         var y=event.offsetY;
  18.         console.log(x);
  19.         console.log(y);
  20.         var c=document.createElementNS("http://www.w3.org/2000/svg","circle");
  21.         c.setAttribute("cx",x);
  22.         c.setAttribute("cy",y);
  23.         c.setAttribute("r",rn(5,20));
  24.         c.setAttribute("fill","rgb("+rn(0,255)+","+rn(0,255)+","+rn(0,255)+")");
  25.         c.setAttribute("opacity",1);
  26.         svg.appendChild(c);
  27.         var t=setInterval(function(){
  28.             var r=parseFloat(c.getAttribute("r"));
  29.             r+=5;
  30.             c.setAttribute("r",r);
  31.             var o=parseFloat(c.getAttribute("opacity"));
  32.             o-=0.05;
  33.             c.setAttribute("opacity",o);
  34.             if(o<=0){
  35.                 clearInterval(t);
  36.                 c.parentNode.removeChild(c);
  37.             }
  38.         },100);
  39.     }
  40.     function rn(min,max){
  41.         return parseInt(Math.random()*(max+1-min)+min);
  42.     }
  43.  </script>
  44.  </body>
  45. </html>

复制代码,保存为html文件,鼠标可以在灰色区域点击查看效果。

 

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!