虫二在路上 2013-05-15
研究了一天的拉菲尔,呼呼,在我贫乏的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>