Wirkung:
Idee:
Verwenden Sie das Ereignis onmousemove, um die Koordinaten der Maus abzurufen, durchlaufen Sie dann die DIVs nacheinander und weisen Sie schließlich die Koordinaten der Maus dem DIV zu.
Code:
Kopieren Sie den Codecode wie folgt:
<head runat="server">
<title></title>
<style type="text/css">
div
{
Breite: 20px;
Höhe: 20px;
Hintergrund: #00FFFF;
Position: absolut;
}
</style>
<script type="text/javascript">
document.onmousemove = Funktion (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev ||. event; //Kompatibilität ermitteln
var pos = GetMouse(oEvent); // Verwenden Sie nach der Bestimmung der Kompatibilität die Funktion zum Verschieben der Mauskoordinaten, um die horizontalen und vertikalen Koordinaten zu erhalten
for (var i = div.length - 1; i > 0; i--) { //Durchlaufe DIVs, beginnend mit dem letzten.
div[i].style.left = div[i - 1].offsetLeft + 'px'; //Gib den vorherigen offsetLeft an den nächsten weiter
div[i].style.top = div[i - 1].offsetTop + 'px'; //Gib den vorherigen offsetTop an den nächsten weiter
}
div[0].style.left = pos.x + 'px'; //Gebe die Abszisse der Maus an den ersten
div[0].style.top = pos.y + 'px'; //Geben Sie dem ersten die vertikale Koordinate der Maus
}
function GetMouse(ev) { //Die Koordinaten der Mausbewegung abrufen
var scrollTop = document.documentElement.scrollTop ||.
var scrollLeft = document.documentElement.scrollLeft ||.
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>
</head>
<Körper>
<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>