تأثير:
فكرة:
استخدم الحدث onmousemove للحصول على إحداثيات الماوس، ثم قم باجتياز عناصر DIV واحدة تلو الأخرى، وأخيرًا قم بتعيين إحداثيات الماوس إلى DIV.
شفرة:
انسخ رمز الكود كما يلي:
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
شعبة
{
العرض: 20 بكسل؛
الارتفاع: 20 بكسل؛
الخلفية: #00FFFF؛
الموقف: مطلق؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
document.onmousemove = الوظيفة (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev ||.event;
var pos = GetMouse(oEvent); // بعد تحديد التوافق، استخدم وظيفة تحريك إحداثيات الماوس للحصول على الإحداثيات الأفقية والرأسية
for (var i = div.length - 1; i > 0; i--) { // اجتياز DIVs، بدءًا من الأخير.
div[i].style.left = div[i - 1].offsetLeft + 'px'; // أعط الإزاحة السابقة لليسار التالي
div[i].style.top = div[i - 1].offsetTop + 'px'; // أعط الإزاحة السابقة للواحدة التالية
}
div[0].style.left = pos.x + 'px'; // أعط حرف الماوس للأول
div[0].style.top = pos.y + 'px'; // أعط الإحداثيات الرأسية للماوس للأول
}
function GetMouse(ev) { // احصل على إحداثيات حركة الماوس
varscrollTop = document.documentElement.scrollTop ||.document.body.scrollTop;
var التمريرLeft = document.documentElement.scrollLeft ||.
العودة { س: ev.clientX + التمرير لليسار، ص: ev.clientY + التمرير للأعلى }
}
</script>
</الرأس>
<الجسم>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
</الجسم>