效果：

代码：

<!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实现 圆形 点击扩大、消失的更多相关文章

  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 对象和类

    python中所有数据都是以对象形式存在.对象既包含数据(变量),也包含代码(函数),是某一类具体事物的特殊实例. 面向对象的三大特性为封装.继承和多态. 1.定义类 #定义空类 class Pers ...

  2. Java集合（4）：Iterator（迭代器）

    迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的Iterator功能比较简单, ...

  3. 第五课 Makefile文件的制作(补充)

    序言: 前面的几节课讲解Makefile的一些基本知识也做了一些小例子实践了几下,那么到现在普通的练习则是没有问题.但是如果做项目文件较多又分层次等等还是会碰上好多问题的,这节课补充一些知识. 知识点 ...

  4. python之路 前段之html，css

    一.HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏 ...

  5. 筛选最新生成的报告——sort

    筛选出最新报告发送,返回报告路径 import os def filePath(path): return os.path.join(os.path.abspath(os.path.dirname(o ...

  6. python入门四：异常

    一.异常 异常就是在触发异常条件时(解释器或程序员)而采取相应的措施 c++中异常使用try, throw, catch等关键字,而python中使用try, raise, except等 二.标准异 ...

  7. Entity FrameWork Code First 之 MVC4 数据库初始化策略用法

    通过启用迁移和更新数据库可以很容易的生成一张表.但是对数据库修改之后,通过数据迁移就没那么好实现了. 这里用到数据库生成策略,进行对数据库操作: 一.3种主要数据库生成策略 1 CreateDatab ...

  8. 2062326 齐力锋 实验三《敏捷开发与XP实践》实验报告

    北京电子科技学院(BESTI) 实 验 报 告 课程: 程序设计与数据结构 班级: 1623 姓名: 齐力锋 学号: 20162326 成绩: 指导教师: 娄嘉鹏/王志强 实验日期: 2017年5月1 ...

  9. Linux内核中的信号机制--一个简单的例子【转】

    本文转载自:http://blog.csdn.net/ce123_zhouwei/article/details/8562958 Linux内核中的信号机制--一个简单的例子 Author:ce123 ...

  10. 并发-CopyOnWrite源码分析

    CopyOnWrite源码分析 参考: https://blog.csdn.net/linsongbin1/article/details/54581787 http://ifeve.com/java ...