Raphaël—JavaScript Library

最新推荐文章于 2017-06-29 14:06:00 发布

原创最新推荐文章于 2017-06-29 14:06:00 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Raphaël #拉菲尔

研究了一天的拉菲尔，呼呼，在我贫乏的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>