متن متحرک در jQuery برای نمایش یک به یک متن های یک لیست به کار میرود . همانند سایت های خبری که عنوان هایی را در بالای هدر به منظور خبرهای داغ نمایش می هند.
حالا ما قصد داریم یک مثال ساده متن متحرک در jQuery را پیاده سازی کنیم.(که به اصطلاح news Ticker می نامیم.) در این مثال, با چند خط کد ساده, این قابلیت را ایجاد می کنیم. و از هیچ گونه پلاگین دیگری استفاده نخواهیم کرد.
کد HTML لیست متن
ما یک لیست نامرتب از متن ها در داریم . که هر یک را با استفاده از حلقه در جی کوئری بصورت افقی به نمایش در می آوریم.
|
1 2 3 4 5 6 7 |
<div id="ticker"> <ul class="news-list"> <li>"You've gotta dance like there's nobody watching, Love like you'll never be hurt, Sing like there's nobody listening, And live like it's heaven on earth" - <strong><i>William W. Purkey</i></strong></li> <li>"Be the change that you wish to see in the world." - <strong><i>Mahatma Gandhi</i></strong></li> <li>"There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle." - <strong><i>Albert Einstein</i></strong></li> </ul> </div> |
با داشتن id باکس ticker , کد جی کوئری مورد نظر را اجرا می کنیم.
ساخت متن متحرک در jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> var ticker = $("#ticker"); var t; var li_count = 1; var li_length = $("ul.news-list li").length; var li = $("li").first(); var runTicker = function(trans_width) { $(li).css({"left":+trans_width+"px"}); t = setInterval(function(){ if (parseInt($(li).css("left")) > -$(li).width()) { $(li).css({"left":parseInt($(li).css("left")) - 1 + "px","display":"block"}); } else { clearInterval(t); li = $(li).next(); if(li_count == li_length){ li_count = 1; li = $("li").first(); runTicker(trans_width); } else if (li_count < li_length) { li_count++; setTimeout(function(){ runTicker(trans_width); },500); } } },5); } $(ticker).hover(function(){ clearInterval(t); }, function(){ runTicker(parseInt($(li).css("left"))); }); runTicker(ticker.width()); </script> |
اینجا, ما کد متن متحرک در jQuery را در یک بازه زمانی برای نمایش هر متن بصورت افقی, اجرا می کنیم. برای دو تا از آیتم های بعدی یک تاخیری وجود دارد.
ما شمارنده (counter) را برای هر بار اجرای حلقه افزایش و بعد از یکبار اتمام کامل حلقه آن را به ۰ تغییر می دهیم. همچنین می توانیم با بردن ماوس و مکث آن روی باکس ticker , حرکت آن را بطور موقت متوقف کنیم.
امیدوارم از آموزش ساخت متن متحرک در jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
ممنون استاد خیلی لطف کردیدمن واقعا بهش احتیاج داشتم
سلام. ممنون
خوشحالیم مفید واقع شده
موفق و پیروز باشید
مهندس چطور سرعت حرکت متن رو میشه کم کرد؟ با پارامتر setTimeout بازی کردم اما هیچ تغییری نکرد.
سلام .
باید مقدار دوم پارامتر
setIntervalرو تغییر بدید ینی عدد۵در خط۲۹بخش ساخت متن متحرک در jQuery همین پست و یا خط۴۹مربوط به سورس کد پایان مطلب که می توانید با مثلا قرار دادن مقدار۱۵نتیچه مطلوب حرکت رو ببینید .موفق باشید.
کارنمی کنه دادا
سلام . دوست عزیز مشکلی نداره و کار میکنه احتمالا فایل جی کوئری رو صحیح لود نکردید . سورس کد کامل رو از باکس دانلود دریافت کنید تا بدون مشکلی بتونید اجراش کنید
موفق باشید.