corrade-http-templates – Blame information for rev 57
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
57 | office | 1 | <!doctype html> |
2 | <html lang="en"> |
||
3 | <head> |
||
4 | <meta charset="utf-8"> |
||
5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
6 | <title>jQuery UI Effects - Easing demo</title> |
||
7 | <link rel="stylesheet" href="../../themes/base/all.css"> |
||
8 | <link rel="stylesheet" href="../demos.css"> |
||
9 | <style> |
||
10 | .graph { |
||
11 | float: left; |
||
12 | margin-left: 10px; |
||
13 | } |
||
14 | </style> |
||
15 | <script src="../../external/requirejs/require.js"></script> |
||
16 | <script src="../bootstrap.js"> |
||
17 | if ( !$( "<canvas>" )[0].getContext ) { |
||
18 | $( "<div>" ).text( |
||
19 | "Your browser doesn't support canvas, which is required for this demo." |
||
20 | ).appendTo( "#graphs" ); |
||
21 | return; |
||
22 | } |
||
23 | |||
24 | var i = 0, |
||
25 | width = 100, |
||
26 | height = 100; |
||
27 | |||
28 | $.each( $.easing, function( name, impl ) { |
||
29 | var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), |
||
30 | text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), |
||
31 | wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), |
||
32 | canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; |
||
33 | |||
34 | canvas.width = width; |
||
35 | canvas.height = height; |
||
36 | var drawHeight = height * 0.8, |
||
37 | cradius = 10; |
||
38 | ctx = canvas.getContext( "2d" ); |
||
39 | ctx.fillStyle = "black"; |
||
40 | |||
41 | // Draw background |
||
42 | ctx.beginPath(); |
||
43 | ctx.moveTo( cradius, 0 ); |
||
44 | ctx.quadraticCurveTo( 0, 0, 0, cradius ); |
||
45 | ctx.lineTo( 0, height - cradius ); |
||
46 | ctx.quadraticCurveTo( 0, height, cradius, height ); |
||
47 | ctx.lineTo( width - cradius, height ); |
||
48 | ctx.quadraticCurveTo( width, height, width, height - cradius ); |
||
49 | ctx.lineTo( width, 0 ); |
||
50 | ctx.lineTo( cradius, 0 ); |
||
51 | ctx.fill(); |
||
52 | |||
53 | // Draw bottom line |
||
54 | ctx.strokeStyle = "#555"; |
||
55 | ctx.beginPath(); |
||
56 | ctx.moveTo( width * 0.1, drawHeight + .5 ); |
||
57 | ctx.lineTo( width * 0.9, drawHeight + .5 ); |
||
58 | ctx.stroke(); |
||
59 | |||
60 | // Draw top line |
||
61 | ctx.strokeStyle = "#555"; |
||
62 | ctx.beginPath(); |
||
63 | ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); |
||
64 | ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); |
||
65 | ctx.stroke(); |
||
66 | |||
67 | // Plot easing |
||
68 | ctx.strokeStyle = "white"; |
||
69 | ctx.beginPath(); |
||
70 | ctx.lineWidth = 2; |
||
71 | ctx.moveTo( width * 0.1, drawHeight ); |
||
72 | $.each( new Array( width ), function( position ) { |
||
73 | var state = position / width, |
||
74 | val = impl( state, position, 0, 1, width ); |
||
75 | ctx.lineTo( position * 0.8 + width * 0.1, |
||
76 | drawHeight - drawHeight * val * 0.7 ); |
||
77 | }); |
||
78 | ctx.stroke(); |
||
79 | |||
80 | // Animate on click |
||
81 | graph.on( "click", function() { |
||
82 | wrap |
||
83 | .animate( { height: "hide" }, 2000, name ) |
||
84 | .delay( 800 ) |
||
85 | .animate( { height: "show" }, 2000, name ); |
||
86 | }); |
||
87 | |||
88 | graph.width( width ).height( height + text.height() + 10 ); |
||
89 | }); |
||
90 | script> |
||
91 | </head> |
||
92 |
|
||
93 | |||
94 |
|
||
95 | |||
96 |
|
||
97 |
|
||
98 |
|
||
99 |
|
||
100 |
|