Raphaël—JavaScript Library

虫二在路上 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>

相关推荐

TesterJingel / 0评论 2020-03-23
yfisaboy / 0评论 2019-12-31
LczPtr / 0评论 2019-12-27