用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() 外发光的更多相关文章

  1. Raphael.js改变元素层叠顺序

    Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...

  2. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  3. js数组元素的添加和删除

    简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...

  4. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  5. js在页面中添加一个元素 —— 添加弹幕

    参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"&g ...

  6. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  7. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  8. 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  9. 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

随机推荐

  1. Nginx浅析

    Nginx浅析 Nginx是什么 总的来说,Nginx其实就是一个和apache类似的服务器软件. Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器,并在一个BSD-like ...

  2. 使用pyspark模仿sqoop从oracle导数据到hive的主要功能(自动建表,分区导入,增量,解决数据换行符问题)

    最近公司开始做大数据项目,让我使用sqoop(1.6.4版本)导数据进行数据分析计算,然而当我们将所有的工作流都放到azkaban上时整个流程跑完需要花费13分钟,而其中导数据(增量)就占了4分钟左右 ...

  3. OpenCV操作像素

    在了解了图像的基础知识和OpenCV的基础知识和操作以后,接下来我们要做的就对像素进行操作,我们知道了图像的本质就是一个矩阵,那么一个矩阵中存储了那么多的像素,我们如何来操作呢?下面通过几个例子来看看 ...

  4. 【转】Cocos2d-x 3.x基础学习: 总结数学类Vec2/Size/Rect

    转载:http://www.taikr.com/article/1847 在Cocos2d-x 3.x中,数学类Vec2.Size.Rect,是比较常用的类.比如设置图片位置,图片大小,两图片的碰撞检 ...

  5. B1004. 成绩排名

    这一题总算是把C++的重载活学活用了一回,节省了很多脑细胞. #include<bits/stdc++.h> using namespace std; struct student{ st ...

  6. PAT甲题题解-1050. String Subtraction (20)-水题

    #include <iostream> #include <cstdio> #include <string.h> #include <algorithm&g ...

  7. 计算机启动出现 Invalid Partition Table

    计算机启动出现 Invalid Partition Table 解决办法 使用大白菜启动盘进入临时系统,打开程序DiskGenius 如果系统盘(一般为 C 盘)非活动状态,先激活 如果装系统的硬盘不 ...

  8. OpenFlow 1.3 控制器与交换机的交互,以及拓扑发现

    前言 最近纠结于控制器如何发现拓扑,于是就翻起了OpenFlow 1.3进行查看,以及一些相关协议 OF 1.3 安全通道,即交互消息 OpenFlow Switch Specification 1. ...

  9. 云平台项目--学习经验--jsrender前端渲染模板

    jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...

  10. 安全相关论文--Security and Dependability

    安全相关论文--Security and Dependability 所参考的文献来自于Kreutz D, Ramos F M V, Esteves Verissimo P, et al. Softw ...