ساخت متن متحرک در jQuery

  • آپدیت شده در تاریخ

ساخت متن متحرک در jQuery

متن متحرک در jQuery برای نمایش یک به یک متن های یک لیست به کار میرود . همانند سایت های خبری که عنوان هایی را در بالای هدر به منظور خبرهای داغ نمایش می هند.

حالا ما قصد داریم یک مثال ساده متن متحرک در jQuery را پیاده سازی کنیم.(که به اصطلاح news Ticker می نامیم.) در این مثال, با چند خط کد ساده, این قابلیت را ایجاد می کنیم. و از هیچ گونه پلاگین دیگری استفاده نخواهیم کرد.

ساخت متن متحرک در jQuery

کد HTML لیست متن

ما یک لیست نامرتب از متن ها در داریم . که هر یک را با استفاده از حلقه در جی کوئری بصورت افقی به نمایش در می آوریم.

با داشتن id باکس ticker , کد جی کوئری مورد نظر را اجرا می کنیم.

ساخت متن متحرک در jQuery

اینجا, ما کد متن متحرک در jQuery را در یک بازه زمانی برای نمایش هر متن بصورت افقی, اجرا می کنیم. برای دو تا از آیتم های بعدی یک تاخیری وجود دارد.

ما شمارنده (counter) را برای هر بار اجرای حلقه افزایش و بعد از یکبار اتمام کامل حلقه آن را به ۰ تغییر می دهیم. همچنین می توانیم با بردن ماوس و مکث آن روی باکس ticker , حرکت آن را بطور موقت متوقف کنیم.

 

امیدوارم از آموزش ساخت متن متحرک در jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۶)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. مریم ۲ تیر ۱۴۰۲

    ممنون استاد خیلی لطف کردیدمن واقعا بهش احتیاج داشتم

    پاسخ
    1. حسن شفیعی ۲ تیر ۱۴۰۲

      سلام. ممنون
      خوشحالیم مفید واقع شده
      موفق و پیروز باشید

      پاسخ
  2. عرفان زیده سرایی ۱۳ مرداد ۱۳۹۷

    مهندس چطور سرعت حرکت متن رو میشه کم کرد؟ با پارامتر setTimeout بازی کردم اما هیچ تغییری نکرد.

    پاسخ
    1. حسن شفیعی ۱۳ مرداد ۱۳۹۷

      سلام .
      باید مقدار دوم پارامتر setInterval رو تغییر بدید ینی عدد ۵ در خط ۲۹ بخش ساخت متن متحرک در jQuery همین پست و یا خط ۴۹ مربوط به سورس کد پایان مطلب که می توانید با مثلا قرار دادن مقدار ۱۵نتیچه مطلوب حرکت رو ببینید .

      موفق باشید.

      پاسخ
  3. محمد علی ۲۰ تیر ۱۳۹۷

    کارنمی کنه دادا

    پاسخ
    1. حسن شفیعی ۲۰ تیر ۱۳۹۷

      سلام . دوست عزیز مشکلی نداره و کار میکنه احتمالا فایل جی کوئری رو صحیح لود نکردید . سورس کد کامل رو از باکس دانلود دریافت کنید تا بدون مشکلی بتونید اجراش کنید
      موفق باشید.

      پاسخ
دوره های آموزشی