این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ marquee در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ marquee در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ marquee در HTML
تگ marquee تگی است که با استفاده از آن میتوان یک متن یا تصویر را بصورت افقی یا عمودی به حرکت درآورد یا در واقع همون متحرک سازی متن یا تصویر، دقیقا مثه باکس های آخرین خبر که در بالای اکثر سایت های خبری دیده می شود.
این تگ در HTML5 بکل منسوخ شدس، هرچند در مرورگرها پشتیبانی میشه و بدون مشکل کار میکنه، ولی وقتی میگیم منسوخ شدس یعنی ممکنه همین فردا مرورگرها بکل حذفش کنن، لذا استفاده از آن توصیه نمیشه و باید بجای آن از CSS استفاده نمایید.
Free-Learn
مثال از تگ marquee در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : حالت عادی و پیش فرض
|
1 2 3 4 5 6 7 |
<body> <marquee> سلام خوبی؟ به وبسایت آموزشی فری لرن خوش آمدید </marquee> </body> |
مثال شماره ۲ : جهت شروع متن از سمت راست و متن بصورت پینگ پنگی ( از کادر بیرون نمیره )
|
1 2 3 4 5 6 7 |
<body> <marquee behavior="alternate" direction="right"> سلام خوبی؟ به وبسایت آموزشی فری لرن خوش آمدید </marquee> </body> |
مثال شماره ۳ : جهت شروع متن از سمت بالا به پایین
|
1 2 3 4 5 6 7 |
<body> <marquee direction="down"> سلام خوبی؟ به وبسایت آموزشی فری لرن خوش آمدید </marquee> </body> |
مثال شماره ۴ : تنظیم سرعت حرکت متن
|
1 2 3 4 5 6 7 |
<body> <marquee scrollamount="20"> سلام خوبی؟ به وبسایت آموزشی فری لرن خوش آمدید </marquee> </body> |
مثال شماره ۵ : حرکت دادن عکس بجای متن ( عکس ها لینک دار هستن، یعنی میشه روشون کلیک کرد )
|
1 2 3 4 5 6 7 8 9 |
<body> <marquee> <a href="https://free-learn.ir/"><img src="files/cat.gif"></a> <a href="https://free-learn.ir/"><img src="files/cat.gif"></a> <a href="https://free-learn.ir/"><img src="files/cat.gif"></a> </marquee> </body> |
مثال شماره ۶ : کنترل کردن تگ Marquee با استفاده از جاوا اسکریپت ( مثلا رو دکمه کلیک میکنیم سرعت زیاد میشه و… )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="text-align:center;"> <h3>تنظیم سرعت</h3> <input type="button" value="آروم" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 1, 0);" /> <input type="button" value="متوسط" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 5, 0);" /> <input type="button" value="تند" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 40, 0);" /> <h3>تنظیم جهت</h3> <input type="button" value="از چپ بیاد" onClick="document.getElementById('marquee5').setAttribute('direction','right');" /> <input type="button" value="از راست بیاد" onClick="document.getElementById('marquee5').setAttribute('direction','left');" /> <input type="button" value="از پایین بیاد" onClick="document.getElementById('marquee5').setAttribute('direction','up');" /> <input type="button" value="از بالا بیاد" onClick="document.getElementById('marquee5').setAttribute('direction','down');" /> <h3>تنظیم حالت نمایش</h3> <input type="button" value="حالت پیش فرض (اسکرول)" onClick="document.getElementById('marquee5').setAttribute('behavior','scroll');" /> <input type="button" value="حالت اسلایدی" onClick="document.getElementById('marquee5').setAttribute('behavior','slide');" /> <input type="button" value="حالت پینگ پنگی" onClick="document.getElementById('marquee5').setAttribute('behavior','alternate');" /> </div> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ marquee در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ marquee در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| behavior | scroll slide alternate |
حالت پیمایش متن / تصویر را مشخص میکند ( پیش فرض scroll ) |
| bgcolor | rgb(x,x,x) xxxxxx# Color_Name |
جهت تنظیم رنگ زمینه |
| direction | up down left right |
جهت پخش شدن متن / تصویر را مشخص میکند |
| height | Pixels % |
برای تنظیم اندازه ارتفاع این تگ |
| hspace | Pixels | برای ایجاد یک فضای خالی بصورت افقی از سمت چپ و راست |
| loop | Number | تعداد دفعات اجرا شدن متن / تصویر را مشخص میکند (اگر مشخص نشود بصورت پیش فرض بی نهایت می باشد) |
| scrollamount | Number | برای تنظیم سرعت پخش شدن متن یا تصویر (پیش فرض ۶ می باشد) |
| scrolldelay | Seconds | مدت زمانی را برای تاخیر در بین پرش هر تکه از اسلاید را مشخص میکند مقدار پیش فرض این صفت ۸۵ می باشد، در نتیجه باید عددی بیشتر از ۸۵ وارد کنید مثله (۱۰۰۰ یعنی ۱ ثانیه) تا بتونید عملکرد این صفت را مشاهده نمایید |
| vspace | Pixels | برای ایجاد یک فضای خالی بصورت عمودی از سمت بالا و پایین |
| width | Pixels % |
اندازه عرض تگ marquee را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ marquee از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ
marqueeیک تگ منسوخ شده و غیراستاندارد در HTML می باشد، هرچند این تگ باحال و جذاب می باشد ولی استفاده از آن پیشنهاد نمی شود، و باید از CSS استفاده کنید. ( همانند مثال های پایین )
Free-Learn
مثال های بیشتر – استفاده از CSS بجای تگ Marquee
ما به راحتی و با استفاده از CSS و ویژگی های Animation و Transform میتونیم دقیقا همانند تگ Marquee متن ها یا تصاویر را به حرکت درآوریم، که در ادامه میتوانید چندین مثال را مشاهده نمایید.
مثال شماره ۱ : حرکت متن از سمت راست به چپ ( حالت Scroll )
|
1 2 3 4 5 6 7 8 |
@keyframes free-learn { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } |
مثال شماره ۲ : حرکت متن از سمت چپ به راست ( حالت Scroll )
|
1 2 3 4 5 6 7 8 |
@keyframes free-learn { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } |
مثال شماره ۳ : حرکت متن از سمت بالا به پایین ( حالت Scroll )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div.box{ overflow:hidden; position: relative; } div.box h2{ animation: free-learn 8s linear infinite; transform:translateY(100%); position: absolute; height: 100%; } @keyframes free-learn { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } |
مثال شماره ۴ : حرکت متن از سمت پایین به بالا ( حالت Scroll )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div.box{ overflow:hidden; position: relative; } div.box h2{ animation: free-learn 8s linear infinite; transform:translateY(-100%); position: absolute; height: 100%; } @keyframes free-learn { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } |
مثال شماره ۵ : حرکت متن از سمت راست به چپ ( حالت پینگ پنگی یا alternate )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div.box h2{ animation: free-learn 3s linear infinite alternate; } @keyframes free-learn { 0% { transform: translateX(70%); } 100% { transform: translateX(0%); } } |
