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> 相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22