[源码分享]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);
  28.         var t=setInterval(function(){
  29.             var r=parseFloat(c.getAttribute("r"));
  30.             r+=5;
  31.             c.setAttribute("r",r);
  33.             var o=parseFloat(c.getAttribute("opacity"));
  34.             o-=0.05;
  35.             c.setAttribute("opacity",o);
  37.             if(o<=0){
  38.                 clearInterval(t);
  39.                 c.parentNode.removeChild(c);
  40.             }
  41.         },100);
  42.     }
  43.     function rn(min,max){
  44.         return parseInt(Math.random()*(max+1-min)+min);
  45.     }
  46.  </script>
  47.  </body>
  48. </html>

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

 

你想把广告放到这里吗？

发表评论

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