92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
#test {
|
|
margin: 5px;
|
|
}
|
|
.container {
|
|
position: absolute;
|
|
opacity: 0.95;
|
|
}
|
|
.shifter {
|
|
position: absolute;
|
|
background-color: black;
|
|
width: 12.5px;
|
|
height: 12.5px;
|
|
}
|
|
.shifter8x8 {
|
|
position: absolute;
|
|
background-color: black;
|
|
width: 16.5px;
|
|
height: 16.5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id=test>
|
|
</div>
|
|
<script>
|
|
function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction)
|
|
{
|
|
var test = document.getElementById('test');
|
|
for (var i = 0; i < 10; i++) {
|
|
if (i == 5)
|
|
topOffset += 5;
|
|
var leftOffsetj = leftOffset;
|
|
for (var j = 0; j < 10; j++) {
|
|
if (j == 5)
|
|
leftOffsetj += 5;
|
|
var container = document.createElement("div");
|
|
var shifter = document.createElement("div");
|
|
container.setAttribute('class', 'container');
|
|
shifter.setAttribute('class', 'shifter');
|
|
container.style.left = (leftOffsetj + j * 16 + i * leftFraction) + "px"
|
|
container.style.top = (topOffset + i * 16 + i * topFraction) + "px"
|
|
shifter.style.left = (5 + j * leftFraction) + "px"
|
|
shifter.style.top = (5 + j * topFraction) + "px"
|
|
container.appendChild(shifter);
|
|
test.appendChild(container);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction)
|
|
{
|
|
var test = document.getElementById('test');
|
|
for (var i = 0; i < 8; i++) {
|
|
if (i == 4)
|
|
topOffset += 5;
|
|
var leftOffsetj = leftOffset;
|
|
for (var j = 0; j < 8; j++) {
|
|
if (j == 4)
|
|
leftOffsetj += 5;
|
|
var container = document.createElement("div");
|
|
var shifter = document.createElement("div");
|
|
container.setAttribute('class', 'container');
|
|
shifter.setAttribute('class', 'shifter8x8');
|
|
container.style.left = (leftOffsetj + j * 20 + i * leftFraction) + "px"
|
|
container.style.top = (topOffset + i * 20 + i * topFraction) + "px"
|
|
shifter.style.left = (5 + j * leftFraction) + "px"
|
|
shifter.style.top = (5 + j * topFraction) + "px"
|
|
container.appendChild(shifter);
|
|
test.appendChild(container);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupTest()
|
|
{
|
|
// Vertical shifts:
|
|
setupGrid10x10(10, 10, 0, 0.1)
|
|
// Horizontal shifts:
|
|
setupGrid10x10(200, 10, 0.1, 0);
|
|
|
|
// And in 8x8 (where exactly 0.5 is more common)
|
|
setupGrid8x8(10, 200, 0, 0.125);
|
|
setupGrid8x8(200, 200, 0.125, 0);
|
|
}
|
|
|
|
setupTest();
|
|
</script>
|
|
</body>
|
|
</html> |