Efecto:
Idea:
Utilice el evento onmousemove para obtener las coordenadas del mouse, luego recorra los DIV uno por uno y finalmente asigne las coordenadas del mouse al DIV.
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
div
{
ancho: 20 píxeles;
altura: 20 píxeles;
fondo: #00FFFF;
posición: absoluta;
}
</estilo>
<tipo de script="texto/javascript">
documento.onmousemove = función (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev || evento //Determinar compatibilidad
var pos = GetMouse(oEvent); //Después de determinar la compatibilidad, use la función de mover las coordenadas del mouse para obtener las coordenadas horizontales y verticales.
for (var i = div.length - 1; i > 0; i--) { //Atraviesa los DIV, comenzando desde el último.
div[i].style.left = div[i - 1].offsetLeft + 'px' //Da el offsetLeft anterior al siguiente;
div[i].style.top = div[i - 1].offsetTop + 'px' //Da el offsetTop anterior al siguiente;
}
div[0].style.left = pos.x + 'px'; //Dale la abscisa del mouse al primero
div[0].style.top = pos.y + 'px'; //Dale la coordenada vertical del mouse al primero
}
function GetMouse(ev) { //Obtener las coordenadas del movimiento del mouse
var scrollTop = document.documentElement.scrollTop || documento.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || documento.body.scrollLeft;
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>
</cabeza>
<cuerpo>
<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>
</cuerpo>