کد متن متحرک برای وبلاگ و سایت شما:

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

IRJAVA.COM
ایران جاوا

عمل کرد کد در مرورگرها (نرم افزار های تماشای سایت)

نگارش	مرورگر	عمل می کند/نمی کند
7.0	Internet Explorer
3.0	Mozilla Firefox (beta)
9.0	Netscape

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

TEXT

شما باید توی کد بالا به جای عبارت "TEXT" متنی که می خواهید حرکت کند را وارد نمایید. خروجی کد بالا به شکل زیر است.

TEXT

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

scrollamount="1" scrolldelay="20"> TEXT

در کد بالا در عبارت scrollamount="1" به جای عدد 1 سرعت حرکت را مشخص می کنید. هرجه این عدد بزرگتر باشد سرعت حرکت بیشتر است. همچنین در عبارت  scrolldelay="20" به جای عدد 20 تاخیر لازم برای طی شدن مسیر توسط متن را وارد کنید. در کل باید روی این مقادیر کمی کار کرده و آن را تست کنید تا حرکت مورد علاقه را بدست آورید. خروجی کد بالا با مقادیر scrollamount="1" scrolldelay="20" به شکل زیره:

TEXT

حال شاید بخواهید برای متن متحرک خود اندازه، رنگ و قلم در نظر بگیرید. حالا کد این شکلی میشه:

scrollamount="1" scrolldelay="20" style="font-family: Tahoma; font-size: 10pt; color: red"> TEXT

خوب… شاید کمی پیچیده به نظر برسه. اما اصلا اینطوری نیست. به جای عبارت های Tahoma و 10pt و red به ترتیب فونت نوشته، سایز نوشته و رنگ نوشته را مشخص نمایید. خروجی کد بالا به شکل زیره:

TEXT

ممکنه نوشته ی شما فارسی باشه. در این صورت بهتره که از راست به چپ حرکت کنه. یا این که شاید شما مایل باشید نوشتتونه از بالا به پایین یا از پایین به بالا حرکت کنه. پس یک تغییر دیگه توی کد به وجود میاد:

scrollamount="1" scrolldelay="20" style="font-family: Tahoma; font-size: 10pt; color: red" direction="right"> TEXT

در کد بالا در عبارت direction="right" به جای کلمه ی right جهت حرکت را مشخص فرمایید. (up: پایین به بالا، down: بالا به پایین، left: راست به چپ، right: چپ به راست) خروجی کد بالا به شکل زیره:

TEXT

شاید شما بخواهید دور Marquee مورد نظر خود، به اصطلاح Border بکشید. یعنی خطی دور تا دورش کشیده شود. حالا باز هم یک بخش دیگه به کدتون اضافه میشه:

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right"> TEXT

در کد بالا به جای عبارات 1px و #FF0000 به ترتیب سایز خط و رنگ خط را مشخص کنید. خروجی کد بالا به شکل زیر است:

TEXT

حالا شاید مایل باشید که سایز Marquee خود را با توجه به نیازتان تغییر دهید. مثلا برای لینکدونی و اعلان بالای سایت یا وبلاگ، می بایست سایز های مختلفی در نظر گرفته شود. پس یک بخش دیگه هم اضافه می کنیم:

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100"> TEXT

در کد بالا به جای عدد 170طول Marquee خود را مشخص کنید و به جای عدد 100 عرض Marquee خود را مشخص کنید. (با گذاشتن یکای % در کنار عدد مورد نظر، می توانید کاری کنید که طول/عرض Marquee دقیقا N در صد از صفحه را در بر گیرد و همواره با تغییر اندازه ی صفحه به وسیله ی مرورگر، اندازه ی آن نیز تغییر کند.) خروجی کد بالا به شکل زیر است:

TEXT

 و حالا اگر می خواهید با بردن نشانه گر موس روی متن متحرک، Marquee متوقف شود، یک کد به آن اضافه می گردد: (با تشکر از آقا محسن عزیز)

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100"onmouseover="this.stop()" onmouseout="this.start()"> TEXT

خروجی کد بالا به شکل زیر است:

TEXT

حال اگر می خواهید Marquee شما در وسط صفحه قرار گیرد، باید دو تگ به اول و آخر کد خود اضافه کنید.

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100" onmouseover="this.stop()" onmouseout="this.start()"> TEXT

خروجی کد بالا به شکل زیر است:

TEXT

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

مقادیر	ویرایشگر
scrollamount="SIZE" scrolldelay="SIZE" style="border:SIZE solid #COLOR; font-family: FONT; font-size: SIZE; color: #COLOR" direction="جهت حرکت متن" width="SIZE" height="SIZE" onmouseover="this.stop()" onmouseout="this.start()"

 موفق باشید

برگرفته از سایت ایران جاوا