forked from DmitryBaranovskiy/raphaeljs.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hand.html
39 lines (39 loc) · 1.84 KB
/
hand.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Roundabout</title>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder", 640, 480),
angle = 0;
while (angle < 360) {
var color = Raphael.getColor();
(function (t, c) {
r.circle(320, 450, 20).attr({stroke: c, fill: c, transform: t, "fill-opacity": .4}).click(function () {
s.animate({transform: t, stroke: c}, 2000, "bounce");
}).mouseover(function () {
this.animate({"fill-opacity": .75}, 500);
}).mouseout(function () {
this.animate({"fill-opacity": .4}, 500);
});
})("r" + angle + " 320 240", color);
angle += 30;
}
Raphael.getColor.reset();
var s = r.set();
s.push(r.path("M320,240c-50,100,50,110,0,190").attr({fill: "none", "stroke-width": 2}));
s.push(r.circle(320, 450, 20).attr({fill: "none", "stroke-width": 2}));
s.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10}));
s.attr({stroke: Raphael.getColor()});
};
</script>
</head>
<body>
<div id="holder"></div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
</body>
</html>