alko,
зарисовка на тему ... только перемещаются не блоки а background ... похоже но не совсем.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">td.mouse{
height:98px;
width:98px;
text-align:center;
margin:0px;
background:url(http://dl9.glitter-graphics.net/pub/1432/1432279yonsqtq9b6.jpg) repeat;
border-radius:0px;
}
table{
border-collapse:collapse;
}
td.circle:after{
content:'';
display:block;
width:20px;
height:20px;
background:#F00;
border-radius:10px;
margin:25% auto;
}
td.circle{
height:20px;
width:20px;
text-align:center;
}
td{
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
for (var l = 5, k, t = document.createElement("table"), c = 0; c < l; c++)
for (var tr = t.insertRow(c), s = 0; s < l; s++) {
k = 1;
if (0 == c || c == l - 1 || 0 == s || s == l - 1) k = 0;
var td = tr.insertCell(s),
n = 50 * (s - 1) + "% " + 50 * (c - 1) + "%";
k || s == c || 4 == s + c || (td.className = "circle", td.onclick = function (b, h) {
return function () {
for (var f, m = b && h ? -50 : 50,
q = document.querySelectorAll("td"),
g = b && 4 != b ? (f = b - 1, [6, 11, 16]) : (f = 5 * (h - 1), [6, 7, 8]), a = 0; a < g.length; a++) {
var p = q[g[a] + f],
d = getPosition(p);
p.style.backgroundPosition = b && 4 != b ? d[0] + "% " + (d[1] + m) + "%" : d[0] + m + "% " + d[1] + "%"
}
}
}(s, c));
k && (td.className = "mouse", td.style.backgroundPosition = n)
}
t.cellspacing = "0";
t.cellpadding = "0";
document.body.appendChild(t);
function getPosition(a) {
a = (window.getComputedStyle ? getComputedStyle(a, null) : a.currentStyle).backgroundPosition;
a = a.match(/-?\d+(\.\d+)?/g) || [0, 0];
a[0] = 50 * Math.round(a[0] / 50);
a[1] = 50 * Math.round(a[1] / 50);
return a
};
function go(a) {
var b = document.querySelectorAll("td.circle");
a--;
var c = Math.floor(Math.random() * b.length);
b[c].onclick();
a && window.setTimeout(function () {
go(a)
}, 1500)
};
</script>
<input type="button" name="" value="go" onclick="go(5)"/>
</body>
</html>