raphael.js 给元素 hover 添加glow() 外发光
用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx , xxx , 还有xxx
$(document).ready(function() {
var paper = Raphael(0,0,360,360);
var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
myCircle.hover(function() {
myCircle.glow().attr('stroke','#FFF');
}, function() {
// removing the glow from the circle??
});
});
raphael.js 官网的文档是在是羞涩难懂,它的文档里面对glow()的用法如下:
Element.glow([glow])⚓➭ Return set of elements that create glow-like effect around given element. See Paper.set. Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself. Parameters
glowobject
parameters object with all properties optional:
{
widthnumber //size of the glow, default is 10
fillboolean //will it be filled, default is false
opacitynumber //opacity, default is 0.5
offsetxnumber //horizontal offset, default is 0
offsetynumber //vertical offset, default is 0
colorstring //glow colour, default is black
}
Returns:objectPaper.set of elements that represents glow
嗯,我也依然还是不晓得要怎么在mouseout的时候如何把这个glow()的效果给remove掉。
后偶然发现一个奇葩的解决方案。
function init(){
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
circle.hover(
// When the mouse comes over the object //
// Stock the created "glow" object in myCircle.g
function() {
this.g = this.glow({color: "#FFF", width: 100});
},
// When the mouse goes away //
// this.g was already created. Destroy it!
function() {
this.g.remove();
});
}
-----------------------------------------节操分界线---------------------------------------------------------------
mouseover --> this.g = this.glow({color: "#FFF", width: 100});
mouseout --> this.g.remove();
妹的,太奇葩了有么有!看文档的人谁能想到是这么用的我陪睡啊。 居然你会发下this.g 的这个g,居然是任意的,只要不是"glow" 把本来的glow给覆盖了就可以,你甚至可以
mouseover --> this.xxoo = this.glow({color: "#FFF", width: 100});
mouseout --> this.xxoo.remove();
这个,太没节操了!
raphael.js 给元素 hover 添加glow() 外发光的更多相关文章
- Raphael.js改变元素层叠顺序
Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...
- JS给元素循环添加事件的问题
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...
- js数组元素的添加和删除
简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- js在页面中添加一个元素 —— 添加弹幕
参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...
- Raphael Js矢量库API简介:
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发
当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...
- 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
随机推荐
- 接口自动化学习--testNG
一个月一更的节奏~ testNg是一个开源的自动化测试框架..具体那些什么特点的就不想打了- -,贴张图(虽然也看不懂): 学习网站:https://www.yiibai.com/testng 一样是 ...
- openstack horizon 开发第二天
依照上次的简单的仪表盘添加动作额外添加或修改的文件mydashboard/├── mypanel│ ├── forms.py│ ├── tables.py│ ├── templates│ ...
- 【Beta阶段】第三次Scrum Meeting!
每日任务内容: 本次会议为第三次Scrum Meeting会议~ 由于本次会议项目经理召开时间依旧较晚(晚上12点半),所以在公寓7层召开,女生参与了线上会议,召开时间大家集会10分钟. 队员 昨日完 ...
- Linux内核分析 笔记二 操作系统是如何工作的 ——by王玥
一.知识要点 1.计算机是如何工作的?(总结)——三个法宝 存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的时候堆栈机制对于计算 ...
- LeetCode-----算法448.找到所有数组中消失的数字
题目: 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. ...
- Design and Implementation of a Routing Control Platform阅读笔记
Design and Implementation of a Routing Control Platform 0.Abstract 1.Introduction 2.Interoperating ...
- 【Leetcode】33. Search in Rotated Sorted Array
Question: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforeh ...
- 【转载】Understanding When to use RabbitMQ or Apache Kafka
https://content.pivotal.io/rabbitmq/understanding-when-to-use-rabbitmq-or-apache-kafka RabbitMQ: Erl ...
- hdu5449 Robot Dog (树形dp+倍增lca)
(警告:本篇博客包含大量人类本质内容) 先处理出来lca,然后就只需要知道从每个点到他的父亲.和从他的父亲到这个点的期望时间就可以了 我们设f[x]为x到他父亲的期望时间:g[x]为从x的父亲到x的期 ...
- idea问题总结记录
1.部署tomcat后,tomcat日志报错:java.lang.ClassNotFoundException 1.1 原因: tomcat虽然部署成功,但是并没有把本项目中访问服务器所需的类库加到W ...