Efeito:
Ideia:
Use o evento onmousemove para obter as coordenadas do mouse, depois percorra os DIVs um por um e, finalmente, atribua as coordenadas do mouse ao DIV.
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
divisão
{
largura: 20px;
altura: 20px;
plano de fundo: #00FFFF;
posição: absoluta;
}
</estilo>
<script type="texto/javascript">
document.onmousemove = função (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev ||
var pos = GetMouse(oEvent); //Após determinar a compatibilidade, utilize a função de mover as coordenadas do mouse para obter as coordenadas horizontais e verticais
for (var i = div.length - 1; i > 0; i--) { //Percorre os DIVs, começando pelo último.
div[i].style.left = div[i - 1].offsetLeft + 'px' //Dá o offsetLeft anterior para o próximo;
div[i].style.top = div[i - 1].offsetTop + 'px' //Dá o offsetTop anterior para o próximo;
}
div[0].style.left = pos.x + 'px' //Dê a abcissa do mouse para o primeiro;
div[0].style.top = pos.y + 'px' //Dê a coordenada vertical do mouse para o primeiro;
}
function GetMouse(ev) { //Obtém as coordenadas do movimento do mouse
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
retornar { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>
</head>
<corpo>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>