ساخت یک Scroll با استفاده از setInterval
اگر با کتابخانه جکوری کار کرده باشید متوجه کند بودن شتاب و حرکت افکت المان های آن شده اید مثلا حرکت یک المان در صفحه که به کندی و بریده بریده انجام می شود . پلاگینی به اسم easing وجود دارد که باعث می شود حرکت و شتاب افکت های شما افزایش یابد (در کاربردهای مورد نیاز باید از این پلاگین استفاده کنید .)
یک div با محتوای متنی داریم و قصد داریم وقتی ماوس بر روی هر یک از دکمه های بالا و پایین قرار گرفت اسکرول div اجرا و به پایین یا بالا برود . اگر همین کار را با جکوری و بدون استفاده از پلاگین easing انجام دهیم حرکت اسکرول با کندی انجام می شود .
کدهای زیر ما را به مقصود مورد نظر می رساند :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script language="javascript"> var Timer; function reset_scroll() { document.getElementById('content').scrollTop=0; } function ScrollUp() { Timer = setInterval("document.getElementById('content').scrollTop -= 2", 15); } function ScrollDown() { Timer = setInterval("document.getElementById('content').scrollTop += 2", 15); } </script> |
در صورتی که بخواهیم همین کار را با استفاده از جکوری و کتابخانه های مربوطه انجام دهیم می بایست حداقل از کتابخانه جکوری و پلاگین مورد نیاز استفاده می کردیم که این خود تا حدودی باعث افزایش زمان بارگذاری صفحه خواهد شد .
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.