效果：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.     body {
  8.       text-align: center;
  9.     }
  10.     svg {
  11.       background: #ddd;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.   <h3>SVG绘图——圆形</h3>
  17.   <svg id="svg19" width="500" height="400">
  18.   </svg>
  19.   <script>
  20.     for(var i=0; i<20; i++){
  21.       var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  22.       c.setAttribute('r', rn(20,100));//半径
  23.       c.setAttribute('cx', rn(0,500));//圆心X
  24.       c.setAttribute('cy', rn(0,400));//圆形Y
  25.       c.setAttribute('fill', rc(0,256));//填充色
  26.       c.setAttribute('fill-opacity', Math.random()); //填充透明度
  27.       svg19.appendChild(c);
  28.  
  29.       //为每个圆形添加事件绑定
  30.       c.onclick = function(){
  31.         var that = this;  //保留事件源的引用
  32.         that.onclick = null;  //让圆形只能点一次
  33.         var t = setInterval(function(){
  34.           //修改圆形半径，每次变大5%
  35.           var r = that.getAttribute('r');
  36.           r *= 1.05; //隐式的浮点数解析
  37.           that.setAttribute('r',r);
  38.           //修改圆形透明度，每次减小5%
  39.           var p = that.getAttribute('fill-opacity');
  40.           p *= 0.95;
  41.           that.setAttribute('fill-opacity', p);
  42.  
  43.           if(p<=0.001){  //已经透明几乎看不见了
  44.             clearInterval(t);
  45.             svg19.removeChild(that);//从DOM上删除圆形
  46.           }
  47.  
  48.         },30);
  49.       }
  50.     }
  51.  
  52.     //random number，返回指定范围内的随机整数
  53.     function rn(min, max) {
  54.       return Math.floor(Math.random() * (max - min) + min);
  55.     }
  56.     //random color，返回指定范围内的随机颜色
  57.     function rc(min, max) {
  58.       var r = rn(min, max);
  59.       var g = rn(min, max);
  60.       var b = rn(min, max);
  61.       return `rgb(${r}, ${g}, ${b})`;
  62.     }
  63.   </script>
  64.  
  65. </body>
  66. </html>

svg实现 圆形 点击扩大、消失的更多相关文章

  1. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  2. Android 响应menu，back键，点击外部消失

    点击外部消失,只需要设置popupWindow.setBackgroundDrawable(new PaintDrawable()); 设置 popupWindow.setFocusable(true ...

  3. javascript高德地图实现点击marker消失marker

    javascript高德地图实现点击marker消失marker <pre> var markers = []; var positions = [[120.17718, 30.21772 ...

  4. 更新ubuntu15.10后触摸板点击功能消失

    问题描述: 昨天升级了ubuntu15.10,升级之后很多15.04让人不爽的东西消失了,大快人心,但是突然发现自己的触摸板不怎么好用了,原来可以点击,双指点击代表右键,三指点击代表鼠标中键的功能不见 ...

  5. Jquery 点击空白处消失

    $(document).bind("click", function (e){ if ( $((e.target || e.srcElement)).closest("# ...

  6. 鼠标移动或者鼠标点击div消失不见排查

    点击事件,导致某div或者容器样式隐藏,如果不能直接发现click事件绑定,那么首先排查哪些方法在控制div的样式, 然后看一看哪些方法在调用修改样式的方法. 然后再排查什么在调用修改样式的方法的方法 ...

  7. vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置

    <div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/sv ...

  8. HTML输入框点击内容消失

    在input标签中这样写 type='text' onfocus='if(this.value=='请输入内容以搜索') this.value=''' onblur='if(this.value==' ...

  9. 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失

    \ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...

随机推荐

  1. python之路 面向对象进阶篇

    一.字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 class Province: # 静态字段 countr ...

  2. $ git学习总结系列（3）——分支管理

    本文主要介绍git分支的概念及常用分支操作. 分支的概念 所谓分支,可以理解成一个个相互独立的工作空间,在每一个分支上的改动不会影响到其他分支的代码.git默认的分支是master分支. 试想一下这样 ...

  3. ES6中Json、String、Map、Object之间的转换

    /** *字符串转json * */ static stringToJson(data){ return JSON.parse(data); } /** *json转字符串 */ static jso ...

  4. MVC bootstrap 实现 bootstrap table 左右传递数据

    源码: @{ ViewBag.Title = "Index"; } @using BC.Platform.UPMS.Models; <!DOCTYPE html> &l ...

  5. Pyspider爬虫教程

    Pyspider爬虫教程 一.安装 1. 安装pip (1)准备工作 yum install –y make gcc-c++ python-devel libxml2-devel libxslt-de ...

  6. Web Service和Servlet的区别

    没接触过web service今天看了一篇文章转过来. 在最开始学习Web Service时候,总觉得Web Service和Servlet没有什么区别,觉得Servlet可以对Http请求进行相应并 ...

  7. python学习笔记（mysqldb下载安装及简单操作）

    python支持对mysql的操作 已经安装配置成功python.mysql 之后根据各自电脑配置选择对应系统的MySQL-python 文件是EXE格式.打开下一步即可 下载地址博主分享下: htt ...

  8. python学习笔记（接口自动化框架 V1.0）

    之前是利用python自带的unittest测试框架 这次自己设计一个 之后再一点点往里面加功能 (ps:当然这个框架真的是很简单..很简单...很简单...) excel文件格式: #!/usr/b ...

  9. cloudsim仿真过程中内存占用过大问题的解决

    在写<云环境下基于预算和截止期约束的科学工作流弹性资源提供和调度>这篇文章时用到了cloudsim仿真软件进行实验仿真,在实验过程中遇到了当仿真执行时间过长时程序总是不能正常结束,由于仿真 ...

  10. Android ADT远程主机强迫关闭了一个现有的连接 Connection attempts: 1 解决方法

    adb有一个限制, 也可以说是bug.  当手机上同时运行的进程数大于64时, 就会引发adb奔溃. 更深层次的原因, 就是windows API的WaitForMultipleObjects所支持的 ...