تأثير:
فكرة:
أولاً، قم بتحميل التمرير للتحكم في شريط التمرير. ثم اكتب طريقة التخزين المؤقت للحركة. تتمثل طريقة التخزين المؤقت للحركة في حساب سرعة المخزن المؤقت DIV أولاً، وتقريبها، ثم تنفيذ الحركة لتحديد وقت الوصول إلى نقطة النهاية. وأخيرا إرجاع المعلمات الخاصة به. ثم قم باستدعاء هذه الطريقة في التمرير، واحسب نقطة النهاية وقم بتعيينها لمعلمات هذه الطريقة.
شفرة:
انسخ رمز الكود كما يلي:
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
#div1
{
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
الخلفية: #0000FF؛
الموقف: مطلق؛
الحق: 0؛
أسفل: 0؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
window.onscroll = وظيفة () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop ||.document.body.scrollTop;
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); // استدعاء المعلمات، والمعلمات الموجودة بالداخل هي نقاط نهاية DIV. أي (الارتفاع البصري - ارتفاع DIV) / 2 + الارتفاع المتحرك
};
var timer = null;
نقل الوظيفة (النهاية) {
ClearInterval(timer); // أولاً، أغلق setInterval المفتوح مسبقًا؛
الموقت = setInterval (وظيفة () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; // احسب سرعة DIV تساوي (نقطة النهاية - ارتفاع الإزاحة) / عامل القياس
السرعة = السرعة > 0 ? Math.ceil(speed) : Math.floor(speed); // لتجنب الكسور العشرية، قم بتقريبها إلى عدد صحيح
if (oDiv.offsetTop == end) { // عندما يصل DIV إلى النهاية، أغلق setInterval؛
ClearInterval(timer);
}
آخر {
oDiv.style.top = oDiv.offsetTop + speed + 'px';
}
}، 30)؛
}
</script>
</الرأس>
<نمط الجسم = "الارتفاع: 1000 بكسل؛">
<div معرف = "div1">
</div>
</الجسم>