码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-05-26 20:07:02      阅读:490      评论:0      收藏:0      [点我收藏+]

标签:click   image   org   tin   指定   enter   引用   for   create   

 

效果:

技术分享

 

 

代码:

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

 

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

标签:click   image   org   tin   指定   enter   引用   for   create   

原文地址:http://www.cnblogs.com/web-fusheng/p/6910214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!