`
jjfat
  • 浏览: 289204 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GBin1分享使用Raphaël类库实现的超酷动画技能图表

阅读更多

 

发布时间:2011/08/09     编译:Terry li - GBin1.com       原文:tympanus.net

GBin1分享使用Raphaël类库实现的超酷动画技能图表

 

在这篇文章中GBin1将介绍如何使用Raphaël这个js类库构建图表。Raphaël是一个非常小的js类库用于构建丰富的矢量图形。

这个图形的创意非常简单,我们使用一些圆弧来展示一个技能百分比数值到一个主圆周中,当我们将鼠标挪到对应的圆弧,将显示对应的技能百分比并且产生对应特效。

 

GBin1在线演示

 

原文来自:GBin1分享使用Raphaël类库实现的超酷动画技能图表

分享到:
评论

相关推荐

    使用java的html解析器实现自动重复抓取任意网站页面.pdf

    Document doc = Jsoup.connect("http://www.gbin1.com/portfolio/latest.html").timeout(0).get(); Elements items = doc.select(".includeitem"); ``` - 在循环中,使用`select()`方法选取特定类的元素,然后...

    使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站

    利用SiteMesh布局库,GBin1网站实现了模板化,使得内容和样式分离。这意味着我们可以直接复用现有页面内容,只需少量改动就能创建适合移动设备的新模板。 【实现步骤】如下: 1. **二级域名策略**:创建一个如`...

    日历JS控件

    7. **HTML结构**:`gbin1schedule.htm`可能是示例页面的源代码,其中定义了日历控件的HTML结构。日历通常由一个容器元素和一系列表示日期的子元素组成,每个子元素可能包含附加的属性或类名,用于在JavaScript中识别...

    VIM实现文件快速跳转插件详解

    VIM 实现文件快速跳转插件详解:FileJumper 在日常的 VIM 编辑工作中,频繁地在不同目录之间切换和打开文件是一项常见的任务。为了提高效率,FileJumper 插件应运而生,它允许用户通过简单的命令快速定位并打开指定...

    如何使用jQuery来处理图片坏链具体实现步骤

    gbin1</title> <meta charset=utf-8 /> [removed] </body> </html> 运行这个页面大家会看到一个坏掉的图。 第二部:是一个JavaScript,它的功能是:如果图片坏掉了,就弹出一个出错提示: ...

    gstreamer之playbin2 aac 音频播放流程

    Playbin的类结构使用C语言的多重继承实现,使得Playbin的实例可以被视为GObject、GElement、GBin的实例,从而可以调用这些类的函数。 在Playbin2的初始化过程中,通过类初始化函数`gst_play_bin_class_init`,将...

    bin2c.exe(Bin2c.exe是一个可将bmp格式图片转换为C代码数组的工具.RAR)

    《使用Bin2c.exe将BMP图片转换为C语言代码数组》 在计算机编程中,有时我们需要在程序中直接嵌入图像数据,特别是在...通过理解BMP格式、C语言数组和使用Bin2c.exe的步骤,开发者能够更好地实现图像数据的嵌入式处理。

    另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在www.gbin1.com这个网站中,可能包含了更多关于Freetile.js的使用教程、示例代码和其他资源,对于学习和应用Freetile.js非常有帮助。通过深入研究和实践,开发者可以充分利用这款插件,为自己的项目创建出优雅且...

    HTML5 Boilerplate

    HTML5 Boilerplate 是一个... 当然这里还有别的HTML5/CSS框架,你可以针对你具体需要使用 ,例如,wordpress上面的开发,参考这个文章: http://www.gbin1.com/technology/html/2011111010handyhtml5css3frameworks/

    PLC编程指令0001.pdf

    1. GRY(灰度)、GBIN(灰度到二进制)、RD3A(读3A模块)、WR3A(写3A模块):处理特定外围设备的读写操作。 十五、接点比较指令: 1. LD=(S1)=(S2):比较两个接点状态是否相等,用于逻辑判断。 以上指令涵盖...

    GContainer:一个基于GObject的库,提供通用的容器接口。-开源

    一个提供GContainerable和GChildable接口的小库,与GtkContainer和GtkWidget关系兼容。 提供了它们的基本实现(GContainer和GChild)和一个自定义实现(GBin),可用作基类和实现示例。

    titanium-d1-kickstart.6.1.1

    titanium-d1-kickstart.6.1.1.gbin 强大的思科模拟器

    推荐11款jQuery开发的复选框和单选框美化插件

    作者:Chris Spooner翻译:Terry li – GBin1.com英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的浏览器及其操作系统对于...

    err-storage-sql:用于SQL数据库的Errbot存储插件

    errbotSQL存储插件 关于 是一个python chatbot,此存储... BOT_EXTRA_STORAGE_PLUGINS_DIR = '/home/gbin/err-storage' STORAGE = 'SQL' STORAGE_CONFIG = { 'data_url' : 'postgresql://scott:tiger@localhost/tes

    VELDT-info:VELDT数据表和文档

    VELDT的主要功能组件是:: FNC 引脚类型银行差分对ICE40UP-5K-SG48 IOB_0a DPIO 2个TRUE_of_IOB_1b 46 IOB_2a DPIO 2个TRUE_of_IOB_3b 47 IOB_3b_G6 DPIO / GBIN 2个COMP_of_IOB_2a 44 IOB_4a DPIO 2个TRUE_of_IOB...

    PLC编程指令[文].pdf

    外围设备指令如灰度(170GRY)和二进制转换(171GBIN),以及读写3A模块(176RD3A/177WR3A),用于与特定硬件的交互。 接点比较指令(224~246)提供了多种逻辑比较操作,便于构建复杂的逻辑控制。 总的来说,...

    HTML5中的nav标签学习笔记

    <h3>gbin1.com文章列表 <li><a href="#html5">HTML5文章介绍</a></li> <li><a href="#css3">CSS3文章介绍</a></li> <li><a href="#jquery">jQuery文章介绍</a></li> ``` 在这个例子中,`<nav>`包含了文章...

    三菱PLC指令

    GBIN:格雷码逆变换指令,执行格雷码逆变换运算。 23. 模拟块读出指令: RD3A:模拟块读出指令,执行模拟块读出运算。 WR3A:模拟块写入指令,执行模拟块写入运算。 24. 接点比较指令: LD:接点比较指令,...

    err-backend-tox:这是errbot的TOX后端

    git checkout https://github.com/gbin/err-backend-tox.git pip install pytox 并添加: BACKEND = 'TOX' BOT_EXTRA_BACKEND_DIR = '/path_to/err-backend-tox' 到你的config.py 验证 # You need to set your ...

Global site tag (gtag.js) - Google Analytics