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实现不规则形状图片触发事件的更多相关文章

  1. 用svg实现不规则形状

    像这种弧形,用纯html和css很难写,但是用svg就简单多了. 可以用作图工具画出一个弧形,然后导成svg格式.在页面中,下面的白块就是div+svg构成 mixin svgCard(...cont ...

  2. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  3. 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

    今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...

  4. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  5. html5 svg

    html5 svg <html > <body> <p>canvas 用js 绘画,是整幅画布,适合游戏 svg可放大,支持dom 操作,js事件 线性渐变.高斯模 ...

  6. JS触发事件大全

          事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...

  7. 9款基于HTML5/SVG/Canvas的折线图表应用

    1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

  8. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  9. 使用Win32 API创建不规则形状&带透明色的窗口

    前一阵突然想起了9月份电面某公司实习时的二面题,大概就是说怎么用Win32 API实现一个透明的窗口,估计当时我的脑残答案肯定让面试官哭笑不得吧.所以本人决定好好研究下这个问题.经过一下午的摸索,基本 ...

随机推荐

  1. 本人亲测-百度富文本编辑器(无bug版本)

    再此我想说明一点,好多教程都是转载别人的,而且也不注明从哪里转载的.每次搜点资料的时候总是跟网上刷小视频的感觉一样.有些人就直接把别人的东西粘贴过来了,一点改动都没有. 废话不多说,直接上教程. (百 ...

  2. java位运算，逻辑运算符

    位运算逻辑运算符包括: 与(&),非(~),或(|),异或(^). &:  条件1&条件2  ,只有条件1和条件2都满足, 整个表达式才为真true,  只要有1个为false ...

  3. eclipse常用快捷键即项目操作

    快捷键: 1.代码提示:Alt+/ 2.撤销上一步操作:Ctrl+z:取消撤销:Ctrl+y: 3.如何注销一整段代码?☞▲第一种注释方法是每行代码前加//:先选中,然后按Ctrl+/:取消注销方法一 ...

  4. Ubuntu系统下制作U盘启动盘

    在终端输入 sudo fdisk -l 查看U盘的路径,如/dev/sdb或/dev/sdc. 然后下载ISO文件,如文件路径为/home/raina/xxx.iso 在终端输入 sudo dd if ...

  5. Web安全之CSRF漏洞整理总结

    这两天整理和编写了csrf的靶场,顺便也复习了以前学习csrf的点,这里记录下学习的总结点. 0x01 关于CSRF 跨站请求伪造 CSRF(Cross-site request forgery)跨站 ...

  6. Mybaits 源码解析 （一）----- 搭建一个mybatis框架（MyBatis HelloWorld）

    源码分析之前先搭一个mybatis的demo,这个在看源码的时候能起到了很大的作用,因为在看源码的时候,会恍然大悟,为什么要这么配置,为什么要这么写.(老鸟可以跳过这篇) 开发环境的准备 创建mave ...

  7. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  8. [洛谷P3709]大爷的字符串题

    题目传送门 不用管它随机什么的,就用贪心的思想去想, 会发现这道题的实质是:求查询区间众数出现次数. 莫队即可解决. 注意字符集1e9,要离散化处理. #include <bits/stdc++ ...

  9. scrollWidth、clientWidth 和 offsetWidth

    scrollWidth:对象的实际内容宽度,不包括边线宽度,会随对象中内容超过可视区而变大. clientWidth:对象内容的可视区的宽度,不包括边线宽度,会随对象显示大小的变化而变化. offse ...

  10. 基于appium实现的线性代码引用unittest单元测试框架

    在前段时间,分享了几篇关于appium基础的博文,再加上期间也有讲到unittest测试框架,所以今天就来一个专题,在appium+python实现的线性代码基础上,引入unittest框架,使代码更 ...