تأثير:
فكرة:
استخدم مؤقت setInterval للحركة، وoffsetWidth لتغيير العرض، واستخدم onmouseover لوضع نقطة النهاية وDIV المحدد في المعلمات قبل تخزين الحركة مؤقتًا.
شفرة:
انسخ رمز الكود كما يلي:
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
شعبة
{
العرض: 100 بكسل؛
الارتفاع: 50 بكسل؛
الخلفية: #0000FF؛
الهامش: 10 بكسل؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
نافذة.onload = وظيفة () {
var oDiv = document.getElementsByTagName('div');
لـ (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; // ضع علامة على DIV لإغلاق مؤقت DIV المقابل
oDiv[i].onmouseover = function () {
move(this, 400); // إعطاء معلمات إخراج المؤقت
}
oDiv[i].onmouseout = function () {
نقل (هذا، 100)؛
}
}
};
نقل الوظيفة (ديف، النهاية) {
ClearInterval(div.timer);
div.timer = setInterval(function () {
var speed = (end - div.offsetWidth) / 5؛ // (النهاية - العرض المتبقي) / عامل القياس = سرعة حركة DIV
السرعة = السرعة > 0 ? Math.ceil(speed) : Math.floor(speed); // التقريب العشري، أي التقريب مع الحمل
if (div.offsetWidth == end) { // أغلق المؤقت عند الوصول إلى النهاية
ClearInterval(div.timer);
}
آخر {
div.style.width = div.offsetWidth + speed + 'px'; // انقل عرض DIV
}
}، 30)
}
</script>
</الرأس>
<الجسم>
<ديف>
</div>
<ديف>
</div>
<ديف>
</div>
</الجسم>