研究了一天的拉菲尔，呼呼，在我贫乏的JS基础上研究了这么些，算是初步完成我想要的效果吧，明天继续，希望能实现我要的效果
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Raphaël · Curver</title>
<style>
body {
background: #000;
color: #000;
font: 100.1% "Lucida Grande", Lucida, Verdana, sans-serif;
}
#holder {
height: 480px;
left: 50%;
margin: 0 0 0 -320px;
position: absolute;
top: 0;
width: 640px;
}
#copy {
bottom: 0;
font-size: .7em;
position: absolute;
right: 1em;
text-align: right;
}
</style>
<script src="../raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
var r = Raphael("holder", 620, 420);
discattr = {fill: "#f00", stroke: "none"};
discattr2 = {fill: "#fff", stroke: "none"};
var x=20;
var y=20;
var ax=120;
var ay=50;
var bx=230;
var by= 300;
var zx= 270;
var zy= 300;
(function () {
var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]];
$("#ee").click(function(){
r.circle(x, y, 5).attr(discattr),
el =r.path(path).attr({fill: "none", stroke: "#fff", "stroke-width": 2,"opacity": 0}),
el.animate({"opacity": 1}, 1000),
r.circle(zx, zy, 5).attr(discattr2)
});
})();
})
</script>
</head>
<body>
<div id="holder"></div>
<div id="ee" style="width:100px; height:30px; line-height:30px; background:#f00; text-align:center; cursor:pointer;">btn</div>
</body>
</html>
相关推荐
**Raphaël JavaScript Library** 是一个强大的矢量图形库，专为Web开发设计，它允许开发者在网页上创建和操作SVG（Scalable Vector Graphics）和VML（Vector Markup Language）图形。这个库尤其适合那些需要在...
Raphaël 是一个JavaScript库，专用于在Web浏览器中创建矢量图形。这个"用 Raphaël 绘制(修改版)"项目是基于Raphaël库的一个实例，主要用于绘制中国地图，并且经过了修改，添加了省区的文字标注，增强了视觉效果和...
Raphaël 是一个强大的JavaScript库，用于在Web浏览器中创建矢量图形。这个库支持SVG（Scalable Vector Graphics）和VML（Vector Markup Language），使得在IE6+和其他现代浏览器中创建交互式、可缩放的矢量图形变得...
Raphaël.js 是一个流行的JavaScript库，专用于在Web浏览器中创建矢量图形。它支持SVG（可缩放矢量图形）标准，允许开发者在网页上绘制复杂的图形，包括动态和交互式的元素。在本篇文章中，我们将深入探讨如何使用...
可视化流程设计器，基于jQuery和Raphaël ，兼容性强，使用方便，扩展性强。经过一夜的努力反编译了一位大神的代码，整理了整体思路并添加注释。 具体描述可在我博客中找到。 10分确实有点贵，但是绝对超值，而且我...
Raphaël 是一个小型 JavaScript 库，它可以简化您在网络上使用矢量图形的工作。 例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用此库轻松轻松地实现它。 Raphaël ['ræfeɪəl] 使用 SVG W3C...
Raphaël是一款强大的JavaScript库，专用于在Web浏览器中创建矢量图形。这个"raphael demo"很显然是一个展示Raphaël功能的实例，它包含三个文件：raphael.html（HTML页面）、raphael.js（Raphaël库本身）和jquery-...
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
Raphaël是一款强大的JavaScript库，专用于在Web浏览器中创建矢量图形。这个库由Dmitry Baranovskiy开发，旨在提供一个跨浏览器的解决方案，支持Internet Explorer 9+以及所有现代浏览器，如Chrome、Firefox、Safari...
Raphaël是一款JavaScript库，专门用于在Web浏览器中创建矢量图形。它支持SVG（Scalable Vector Graphics）和VML（Vector Markup Language），这两种格式都能确保在不同浏览器上一致的显示效果，包括老旧的IE版本。...
Raphaël是一个JavaScript库，专门用于在Web浏览器中创建和操作矢量图形。接下来，我们将深入探讨这个主题，了解如何使用Raphaël和SVG进行工作流的可视化设计。 首先，SVG是一种XML标记语言，用于描述二维图形。...
该插件为javascript矢量库Raphaël（ ）提供了布尔操作。 您可以使用单个元素（而不是集合）来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] 排除[A ^ B =（A + B）-（A * B）| A XOR B] ...
Raphaël.js 是一个流行的JavaScript库，专用于在Web浏览器中创建矢量图形。这个压缩包包含了关于Raphaël.js的所有文档、网站内容以及可能的书籍资源，是学习和深入理解Raphaël.js的理想资料集合。下面将详细阐述...
Raphaël是一款强大的JavaScript库，专为Web上的矢量图形设计而开发。它使得开发者能够在HTML5的canvas或SVG（Scalable Vector Graphics）元素上绘制复杂的图形，且兼容大部分现代浏览器，包括IE6+。这个库由Dmitry ...
"raphael动态绘制简单的图形.zip"这个压缩包文件显然包含了使用Raphaël JavaScript库进行动态图形绘制的相关示例。Raphaël是一个流行的选择，因为它允许开发者在网页上创建矢量图形，这些图形可以在各种分辨率和...
在本文中，我们将深入探讨如何使用Raphaël JavaScript库来创建可拖动的SVG控件，并结合jQuery UI实现交互式功能。Raphaël是一个强大的JavaScript库，它允许开发者在网页上创建复杂的矢量图形，支持SVG和VML格式，...
Raphaël是一个JavaScript图形库，它通常用于创建交互式的图表和复杂的图形，而Servlet是Java平台上的一种服务器端编程模型，常用于处理HTTP请求。将Raphaël与Servlet结合，可以构建动态的、可视化的网络安全监控...
Raphaël，一个基于JavaScript的SVG/VML库，为开发者提供了强大的2D图形绘制功能，使得在浏览器端创建复杂的矢量图形变得轻而易举。本文将深入探讨Raphaël库的原理、主要特性以及如何在实际项目中应用。 Raphaël...
RaphaëlVarane新标签页扩展程序为您的Chrome浏览器带来了新外观。 安装RaphaëlVarane New Tab Theme，并欣赏RaphaëlVarane的精选高清图片。 它带有一些很酷的属性，这些属性可以改善您的“新标签页”体验，例如：...
Raphaël.js 是一个JavaScript库，它使得在Web浏览器中创建矢量图形变得简单。这个库基于SVG（Scalable Vector Graphics）和VML（Vector Markup Language），能够在所有现代浏览器以及Internet Explorer 6+上运行。...