html5 svg实现不规则形状图片触发事件
html5 svg实现不规则形状图片触发事件
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" class="dds" />
</svg>
<script src="/moban/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.dds').on('click',function(){
$(this).attr('fill','green');
})
})
</script>
</body>
</html>
</pre>
html5 svg实现不规则形状图片触发事件的更多相关文章
- 用svg实现不规则形状
像这种弧形,用纯html和css很难写,但是用svg就简单多了. 可以用作图工具画出一个弧形,然后导成svg格式.在页面中,下面的白块就是div+svg构成 mixin svgCard(...cont ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- html5 svg
html5 svg <html > <body> <p>canvas 用js 绘画,是整幅画布,适合游戏 svg可放大,支持dom 操作,js事件 线性渐变.高斯模 ...
- JS触发事件大全
事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...
- 9款基于HTML5/SVG/Canvas的折线图表应用
1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- 使用Win32 API创建不规则形状&带透明色的窗口
前一阵突然想起了9月份电面某公司实习时的二面题,大概就是说怎么用Win32 API实现一个透明的窗口,估计当时我的脑残答案肯定让面试官哭笑不得吧.所以本人决定好好研究下这个问题.经过一下午的摸索,基本 ...
随机推荐
- 浅谈sqlserver的事务锁
锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新 A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 ...
- MacOS 安装MysqlDB 问题解决方案( 解决 IndexError: string index out of range)
pip install MySQL-python时报错如下: Command "python setup.py egg_info" failed with error code 1 ...
- java架构之路-(Redis专题)Redis的高性能和持久化
上次我们简单的说了一下我们的redis的安装和使用,这次我们来说说redis为什么那么快和持久化数据 在我们现有的redis中(5.0.*之前的版本),Redis都是单线程的,那么单线程的Redis为 ...
- [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画
1. 什么是 CompositionBrush CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔. 使UWP 应用时可以选择使用 XAML 画 ...
- iOS开发请您把握现在 — 面向未来学习
iOS开发请您把握现在 — 面向未来学习 这一篇文章,如果你是一名iOS开发正好也处于开发晋升瓶颈迷茫期,不妨停下你的脚步,花五分钟看看,兴许有你需要的!文章结尾有彩蛋 群里常见的唱哀 iOS现在到底 ...
- opencv::处理边缘
卷积边界问题 图像卷积的时候边界像素,不能被卷积操作,原因在于边界像素没有完全跟kernel重叠,所以当3x3滤波时候有1个像素的边缘没有被处理,5x5滤波的时候有2个像素的边缘没有被处理. 处理边缘 ...
- python学习-流程控制(四)
学习笔记中的源码:传送门 4.2if分支结构 if语句有三种形式: 如果 if 条件为“真”,程序就会执行 i f条件后面的多条语句:否则就会依次判断 elif 条件,如果 elif 条件为“真”,程 ...
- 7.HTTP协议
1.什么是url? 1.1 URL是统一资源定位符,表示的是一个资源,(图片 文字 视频 音频 等等) 单个资源介绍--图片 那URL的组成部分是由协议, 域名:端口, 路径和文件名 1.2 url组 ...
- jedis 连接 虚拟机内redis服务
最近一直在玩关于redis集群,这个关于集群的具体设置步骤可以看这个做为参考, 我在虚拟机内建立的是一个1主3从2哨兵的模式 然后在windows环境下是配置了jedis(具体步骤可以参考这个人写的) ...
- 基于SEER的区块链版赛亚麻将游戏Pre alpha版本内测啦!
游戏基于SEER测试网络文体平台模块(Culture and Sports Platform,CSP),正在进行数据调试等工作,大家可以尝鲜体验. 此游戏账户和资金等核心系统完全基于区块链,但目前运行 ...