svg实现 圆形 点击扩大、消失

 

效果：

 

 

代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——圆形</h3>
  <svg id="svg19" width="500" height="400">
  </svg>
  <script>
    for(var i=0; i<20; i++){
      var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      c.setAttribute('r', rn(20,100));//半径
      c.setAttribute('cx', rn(0,500));//圆心X
      c.setAttribute('cy', rn(0,400));//圆形Y
      c.setAttribute('fill', rc(0,256));//填充色
      c.setAttribute('fill-opacity', Math.random()); //填充透明度
      svg19.appendChild(c);

      //为每个圆形添加事件绑定
      c.onclick = function(){
        var that = this;  //保留事件源的引用
        that.onclick = null;  //让圆形只能点一次
        var t = setInterval(function(){
          //修改圆形半径，每次变大5%
          var r = that.getAttribute('r');
          r *= 1.05; //隐式的浮点数解析
          that.setAttribute('r',r);
          //修改圆形透明度，每次减小5%
          var p = that.getAttribute('fill-opacity');
          p *= 0.95;
          that.setAttribute('fill-opacity', p);

          if(p<=0.001){  //已经透明几乎看不见了
            clearInterval(t);
            svg19.removeChild(that);//从DOM上删除圆形
          }

        },30);
      }
    }


    //random number，返回指定范围内的随机整数
    function rn(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
    //random color，返回指定范围内的随机颜色
    function rc(min, max) {
      var r = rn(min, max);
      var g = rn(min, max);
      var b = rn(min, max);
      return `rgb(${r}, ${g}, ${b})`;
    }
  </script>

</body>
</html>

 

posted @ 2017-05-26 19:52  快乐的咸鱼  阅读(2144)  评论(0)  编辑  收藏  举报