• 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>
  • 相关阅读:
    编写登陆认证程序
    Ubuntu18.04安装MySQL
    python输出的高亮显示
    河北省赛
    dp
    迷宫问题
    牛客-幸运数字Ⅱ
    [管理运筹学]线性规划&单纯形法的各种姿势(题目:[NOI2008]志愿者招募)
    [管理运筹学]指派问题的匈牙利算法及其c++实现 (例:「网络流 24 题」分配问题 )
    打算在CSDN写了,虽然博客园也很好
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6910214.html
Copyright © 2020-2023  润新知