تأثير:
فكرة:
استخدم مؤقت setInerval() لأداء التمرين. ثم النقطة الأساسية هي إعطائها حكمًا لملء الفجوة عندما تتوقف أخيرًا.
شفرة:
انسخ رمز الكود كما يلي:
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
#div1
{
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
الخلفية: #0000FF؛
الموقف: مطلق؛
اليسار: 800 بكسل؛
أعلى: 100 بكسل؛
}
#div200
{
العرض: 1 بكسل؛
الارتفاع: 400 بكسل؛
الخلفية: #FF0000؛
الموقف: مطلق؛
اليسار: 200 بكسل؛
}
#div500
{
العرض: 1 بكسل؛
الارتفاع: 400 بكسل؛
الخلفية: #FF0000؛
الموقف: مطلق؛
اليسار: 500 بكسل؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
نقل الوظيفة (النهاية) {
var oDiv = document.getElementById('div1');
var timer = null;
الموقت = setInterval (وظيفة () {
var speed = (end - oDiv.offsetLeft) / 5; // احصل على سرعة الحركة بناءً على نقطة النهاية والإزاحةLeft
السرعة = السرعة > 0 ? Math.ceil(speed) : Math.floor(speed); // حمل التقريب، تصبح العلامة العشرية عددًا صحيحًا،
// إذا (oDiv.offsetLeft <= النهاية) {
// ClearInterval(timer);
// }
// آخر {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { // لأنه ستكون هناك فجوة صغيرة في النهاية عند التوقف، أو أنها لا تصل إلى المكان المحدد بالكامل، لذا يجب أن تكون أقل من سرعتها
ClearInterval(timer); // عندما تكون المسافة أقل من السرعة، أوقف المؤقت
oDiv.style.left = end + 'px'; // املأ الفجوة بعد التوقف.
}
آخر {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}، 30)
}
</script>
</الرأس>
<الجسم>
<input type = "button" id = "btn1" value = "إلى الموضع 500" عند النقر = "move (500)؛"
<input type = "button" id = "btn2" value = "إلى الموضع 200" عند النقر = "move (200)؛"
<div معرف = "div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</الجسم>