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 |
|
20 |
|
21 p = paper.rect(50, 50 , 50, 50 ).attr({stroke:"#fff","stroke-width":0.3, fill: "hsb(0.50, 1, 1)",}); |
|
22 p.mouseover(function () { |
|
23 this.animate({height:Math.floor(Math.random()*50) }, 400, "bounce"); |
|
24 }).mouseout(function () { |
|
25 this.animate({width:Math.floor(Math.random()*50) }, 400, "bounce"); |
|
26 }) |
|
27 |
|
28 q = paper.rect(50, 50 , 50, 50 ).attr({stroke:"#fff","stroke-width":0.3, fill: "hsb(0.90, 1, 1)",}); |
|
29 q.mouseover(function () { |
|
30 this.animate({height:Math.floor(Math.random()*50) }, 400, "bounce"); |
|
31 }).mouseout(function () { |
|
32 this.animate({width:Math.floor(Math.random()*50) }, 400, "bounce"); |
|
33 }) |
|
34 |
|
35 </script> |
|
36 test |
|
37 |
|
38 </body> |
|
39 </html> |
|