Effet:
Idée:
Utilisez l'événement onmousemove pour obtenir les coordonnées de la souris, puis parcourez les DIV un par un, et enfin attribuez les coordonnées de la souris au DIV.
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
div
{
largeur : 20 px ;
hauteur : 20px ;
arrière-plan : #00FFFF ;
position : absolue ;
}
</style>
<script type="text/javascript">
document.onmousemove = fonction (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev || event; //Déterminer la compatibilité
var pos = GetMouse(oEvent); //Après avoir déterminé la compatibilité, utilisez la fonction de déplacement des coordonnées de la souris pour obtenir les coordonnées horizontales et verticales
for (var i = div.length - 1; i > 0; i--) { // Traverser les DIV, en commençant par le dernier.
div[i].style.left = div[i - 1].offsetLeft + 'px'; //Donne le décalageLeft précédent au suivant
div[i].style.top = div[i - 1].offsetTop + 'px'; //Donne le offsetTop précédent au suivant
}
div[0].style.left = pos.x + 'px'; //Donne l'abscisse de la souris au premier
div[0].style.top = pos.y + 'px'; //Donne la coordonnée verticale de la souris au premier
}
function GetMouse(ev) { //Obtenir les coordonnées du mouvement de la souris
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x : ev.clientX + scrollLeft, y : ev.clientY + scrollTop }
}
</script>
</tête>
<corps>
<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>
</corps>