• 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>
  • 相关阅读:
    消息队列如何测试
    服务宕机问题排查记录
    element UI table
    CMake进行C/C++开发(linux下)
    Nanodet模型部署(ncnn,openvino)/YOLOX部署(TensorRT)
    安装docker报错:Failed to listen on Docker Socket for the API 头条号
    JZ071把数字翻译成字符串
    JZ068打印从 1 到最大的 n 位数
    JZ072礼物的最大价值
    JZ076树中两个节点的最低公共祖先
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6910214.html
Copyright © 2020-2023  润新知