ساخت یک Scroll با استفاده از setInterval

اگر با کتابخانه جکوری کار کرده باشید متوجه کند بودن شتاب و حرکت افکت المان های آن شده اید مثلا حرکت یک المان در صفحه که به کندی و بریده بریده انجام می شود . پلاگینی به اسم  easing وجود دارد که باعث می شود حرکت و شتاب افکت های شما افزایش یابد (در کاربردهای مورد نیاز باید از این پلاگین استفاده کنید .)

Scroll-without-Jquery

یک div با محتوای متنی داریم و قصد داریم وقتی ماوس بر روی هر یک از دکمه های بالا و پایین قرار گرفت اسکرول div اجرا و به پایین یا بالا برود . اگر همین کار را با جکوری و بدون استفاده از پلاگین easing انجام دهیم حرکت اسکرول با کندی انجام می شود .

کدهای زیر ما را به مقصود مورد نظر می رساند :

<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>

در صورتی که بخواهیم همین کار را با استفاده از جکوری و کتابخانه های مربوطه انجام دهیم می بایست حداقل از  کتابخانه جکوری و پلاگین مورد نیاز استفاده می کردیم که این خود تا حدودی باعث افزایش زمان بارگذاری صفحه خواهد شد .

دانلود کدهای مقاله


توسط : عثمان رحیمی  2 ماه قبل ، پنج شنبه 15 آبان 1393 ساعت 13:52  0  3456

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط