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> 相关推荐
annan 2020-07-18
举 2020-06-27
harddays 2020-06-21
长安长夜Saint 2020-06-14
Magicsoftware 2020-06-04
soyo 2020-05-28
haocxy 2020-05-28
davidliu00 2020-05-26
coolhty 2020-05-20
niehanmin 2020-05-19
无缘公子 2020-05-19
fansenjun 2020-03-01
zmosquito 2020-05-10
玫瑰小妖 2020-05-10
jianghero 2020-05-05
jocleyn 2020-05-03
angqiuli 2020-04-26
waterv 2020-04-26
wcqwcq 2020-04-22