|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <title>Example raphael</title> |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
6 |
|
7 </head> |
|
8 <body> |
|
9 test |
|
10 |
|
11 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> |
|
12 <script type="text/javascript" src="raphael-min.js"></script> |
|
13 |
|
14 <script type="text/javascript"> |
|
15 |
|
16 |
|
17 // Creates canvas 320 × 200 at 10, 50 |
|
18 var paper = Raphael(10, 50, 500, 200); |
|
19 lineSize : 500; |
|
20 |
|
21 |
|
22 element = new Array(); |
|
23 |
|
24 |
|
25 position = 'left'; |
|
26 //rect = paper.rect(20, 20, 50, 50).attr({"fill": "#fbb"}); |
|
27 //rect.attr({"stroke-width":1}); |
|
28 |
|
29 for(var i=0; i<100; i++) { |
|
30 var x = 5*i; |
|
31 var width = Math.floor(Math.random()*20); |
|
32 p = element[i] = paper.rect(x, 50-width , 5, width ).attr({stroke:"#fff","stroke-width":0.3, fill: "hsb(0."+i+", 1, 1)",}); |
|
33 |
|
34 p.mouseover(function () { |
|
35 var heightM = Math.floor(Math.random()*50) |
|
36 this.animate({height:heightM }, 400, "bounce"); |
|
37 }) |
|
38 } |
|
39 |
|
40 for(var i=0; i<element.length; i++) { |
|
41 MyElement = element[i]; |
|
42 $(MyElement.node).mouseover(function (){ |
|
43 var heightM = Math.floor(Math.random()*50) |
|
44 this.parent.animate({height:heightM }, 400, "bounce"); |
|
45 }); |
|
46 } |
|
47 |
|
48 /* |
|
49 $(rect.node).mouseover(function () { |
|
50 if (position === 'left') { |
|
51 rect.animate({x: 300, y: 100}, 400, "<>"); |
|
52 position = 'right'; |
|
53 } else { |
|
54 rect.animate({x: 20, y: 20 }, 800, "bounce"); |
|
55 position = 'left'; |
|
56 } |
|
57 }); |
|
58 */ |
|
59 setInterval(function () { |
|
60 |
|
61 }, 10); |
|
62 </script> |
|
63 test |
|
64 |
|
65 </body> |
|
66 </html> |