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>
svg实现 圆形 点击扩大、消失的更多相关文章
- SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...
- Android 响应menu,back键,点击外部消失
点击外部消失,只需要设置popupWindow.setBackgroundDrawable(new PaintDrawable()); 设置 popupWindow.setFocusable(true ...
- javascript高德地图实现点击marker消失marker
javascript高德地图实现点击marker消失marker <pre> var markers = []; var positions = [[120.17718, 30.21772 ...
- 更新ubuntu15.10后触摸板点击功能消失
问题描述: 昨天升级了ubuntu15.10,升级之后很多15.04让人不爽的东西消失了,大快人心,但是突然发现自己的触摸板不怎么好用了,原来可以点击,双指点击代表右键,三指点击代表鼠标中键的功能不见 ...
- Jquery 点击空白处消失
$(document).bind("click", function (e){ if ( $((e.target || e.srcElement)).closest("# ...
- 鼠标移动或者鼠标点击div消失不见排查
点击事件,导致某div或者容器样式隐藏,如果不能直接发现click事件绑定,那么首先排查哪些方法在控制div的样式, 然后看一看哪些方法在调用修改样式的方法. 然后再排查什么在调用修改样式的方法的方法 ...
- vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置
<div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/sv ...
- HTML输入框点击内容消失
在input标签中这样写 type='text' onfocus='if(this.value=='请输入内容以搜索') this.value=''' onblur='if(this.value==' ...
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...
随机推荐
- mysql增量恢复的一个实例操作
通过防火墙禁止web等应用向主库写数据或者锁表,让主库暂时停止更新,然后进行恢复 模拟整个场景 1.登录数据库 [root@promote 3306]# mysql -uroot -S /data/3 ...
- GIT学习笔记(3):分支管理
GIT学习笔记(3):分支管理 何谓分支 GIT是如何存储数据的 GIT不是存储文件差异或者变化量,而是一系列文件的快照.在Git提交时,会保存一个提交(commit)对象,该对象包含一个指向暂存内容 ...
- CodeForces - 220B Little Elephant and Array (莫队+离散化 / 离线树状数组)
题意:N个数,M个查询,求[Li,Ri]区间内出现次数等于其数值大小的数的个数. 分析:用莫队处理离线问题是一种解决方案.但ai的范围可达到1e9,所以需要离散化预处理.每次区间向外扩的更新的过程中, ...
- maven Eclipse实战材料整理
最近在看github上面的项目,发现好多的源码都是maven组织的,但又要去使用maven,因此找资料学习,但是效果很不好,直到昨天晚上看了mooc上面的视频,理清了自己的思路,特将资料列表如下: 视 ...
- 通过自动回复机器人学Mybatis:代码重构(分层)
imooc视频学习笔记 ----> URL:http://www.imooc.com/learn/154 ListServlet.java package com.imooc.servlet; ...
- java调用操作系统命令
java的Runtime.getRuntime().exec(commandStr)可以调用执行cmd指令. cmd /c dir 是执行完dir命令后关闭命令窗口. cmd /k dir 是执行完d ...
- Zabbix JVM 安装
Zabbix 服务端安装插件 系统:centos 7.4 x64 环境:zabbix 3.0.16 yum源:rpm -ivh http://repo.zabbix.com/zabbix/3.0/rh ...
- 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统
安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...
- cocoa应用程序中NSStatusItem的使用
mac上的应用程序除了左上方会有菜单之外,在屏幕的右上方也会有一个图标样的菜单,这个类似于windows上右下角的system tray. 本文讲述如何给自己的应用程序添加一个system tray( ...
- 深入理解JVM 垃圾收集器(下)G1收集器
1.回顾CMS 1.1堆内存结构 1.2新生代GC 1.3老年代GC 2.G1收集器 2.1G1实现概览及使用场景 G1的推荐使用场景 2.2GC 2.2.1新生代GC 2.2.2老年代GC 老年代G ...