`
feilying
  • 浏览: 7559 次
文章分类
社区版块
存档分类
最新评论

Raphaël—JavaScript Library

阅读更多

研究了一天的拉菲尔,呼呼,在我贫乏的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 绘制矢量

    **Raphaël JavaScript Library** 是一个强大的矢量图形库,专为Web开发设计,它允许开发者在网页上创建和操作SVG(Scalable Vector Graphics)和VML(Vector Markup Language)图形。这个库尤其适合那些需要在...

    Raphaël 用法 An Introduction to the Raphael JS Library

    Raphaël 是一个强大的JavaScript库,用于在Web浏览器中创建矢量图形。这个库支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language),使得在IE6+和其他现代浏览器中创建交互式、可缩放的矢量图形变得...

    raphael 1.5.2

    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 ...

    40个轻量级JavaScript库[整理].pdf

    - **Raphaël**:用于Web上的矢量图形,支持SVG和VML,包括旋转、动画和缩放。 - **ImageFX**:为图片添加各种效果,如虚化、锐化等,基于HTML5画布对象。 - **Pixastic**:使用HTML5画布对象进行像素级别的图像...

    14个华丽的javascript图表资源和插件

    10. **Raphaël**:Raphaël是一个轻量级库,利用二维图形API简化Web上的图形处理,可用于创建独特的图表和视觉效果。 11. **PlotKit**:PlotKit支持SVG和HTML Canvas,适用于Adobe SVG Viewer,可以创建复杂的图表...

Global site tag (gtag.js) - Google Analytics