OLD | NEW |
---|---|
(Empty) | |
1 <html> | |
eae
2013/11/13 00:29:01
Add a DOCTYPE to trigger standards mode for at lea
| |
2 <head> | |
3 <style> | |
4 #test { | |
5 margin: 5px; | |
6 } | |
7 .container { | |
8 position: absolute; | |
9 opacity: 0.95; | |
10 } | |
11 .shifter { | |
12 position: absolute; | |
13 background-color: black; | |
14 width: 12.5px; | |
15 height: 12.5px; | |
16 } | |
17 .shifter8x8 { | |
18 position: absolute; | |
19 background-color: black; | |
20 width: 16.5px; | |
21 height: 16.5px; | |
22 } | |
23 </style> | |
24 </head> | |
25 <body> | |
26 <div id=test> | |
27 </div> | |
28 <script> | |
29 function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction) | |
30 { | |
31 var test = document.getElementById('test'); | |
32 for (var i = 0; i < 10; i++) { | |
33 if (i == 5) | |
34 topOffset += 5; | |
35 var leftOffsetj = leftOffset; | |
36 for (var j = 0; j < 10; j++) { | |
37 if (j == 5) | |
38 leftOffsetj += 5; | |
39 var container = document.createElement("div"); | |
40 var shifter = document.createElement("div"); | |
41 container.setAttribute('class', 'container'); | |
42 shifter.setAttribute('class', 'shifter'); | |
43 container.style.left = (leftOffsetj + j * 16 + i * leftFraction) + "px" | |
44 container.style.top = (topOffset + i * 16 + i * topFraction) + " px" | |
45 shifter.style.left = (5 + j * leftFraction) + "px" | |
46 shifter.style.top = (5 + j * topFraction) + "px" | |
47 container.appendChild(shifter); | |
48 test.appendChild(container); | |
49 } | |
50 } | |
51 } | |
52 | |
53 function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction) | |
54 { | |
55 var test = document.getElementById('test'); | |
56 for (var i = 0; i < 8; i++) { | |
57 if (i == 4) | |
58 topOffset += 5; | |
59 var leftOffsetj = leftOffset; | |
60 for (var j = 0; j < 8; j++) { | |
61 if (j == 4) | |
62 leftOffsetj += 5; | |
63 var container = document.createElement("div"); | |
64 var shifter = document.createElement("div"); | |
65 container.setAttribute('class', 'container'); | |
66 shifter.setAttribute('class', 'shifter8x8'); | |
67 container.style.left = (leftOffsetj + j * 20 + i * leftFraction) + "px" | |
68 container.style.top = (topOffset + i * 20 + i * topFraction) + " px" | |
69 shifter.style.left = (5 + j * leftFraction) + "px" | |
70 shifter.style.top = (5 + j * topFraction) + "px" | |
71 container.appendChild(shifter); | |
72 test.appendChild(container); | |
73 } | |
74 } | |
75 } | |
76 | |
77 function setupTest() | |
78 { | |
79 // Vertical shifts: | |
80 setupGrid10x10(10, 10, 0, 0.1) | |
81 // Horizontal shifts: | |
82 setupGrid10x10(200, 10, 0.1, 0); | |
83 | |
84 // And in 8x8 (where exactly 0.5 is more common) | |
85 setupGrid8x8(10, 200, 0, 0.125); | |
86 setupGrid8x8(200, 200, 0.125, 0); | |
87 } | |
88 | |
89 setupTest(); | |
90 </script> | |
91 </body> | |
92 </html> | |
OLD | NEW |