حتماً تا به حال وب سایت هایی را دیده اید که شامل متن ها و عکس های متحرک هستند، مثلاً لیستی از عناوین اخبار و یا آخرین مطالب بصورت افقی یا عمودی در headerیا sidebar سایت، حرکت می کنند. در html با استفاده از تگ marquee می توان عناصر متحرک را ایجاد کرد. البته این یک تگ غیر استاندارد است که فقط در ورژن های قدیمی html معتبر است.
آنچه در این فیلم آموزشی خواهید آموخت :
- نحوه استفاده از تگ marquee
- آشنایی با صفات اصلی تگ marquee
- بیان دلایل استفاده نکردن از تگ marquee و معرفی جایگزین برای آن
[hdplay id=30]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/marquee-deprecated-tag.mp4′]دانلود فیلم آموزش ایجاد متون و عکس های متحرک در HTML[/video_download]
[/free_vip]
دسترسی سریع :
- آموزش قبلی : فیلم آموزش نحوه استفاده از جی کوئری و جاوا اسکریپت (jQuery-JavaScript) در HTML
- آموزش بعدی : فیلم آموزش نحوه نوشتن توضیحات شرطی برای ie در HTML
- لیست فیلم ها : فیلم های آموزش جامع HTML
متن فیلم آموزشی ایجاد متون و عکس های متحرک در HTML
متحرک سازی
تگ marquee برای متحرک سازی در html4 استفاده می شد اما در xhtml یا html5 استفاده نمی شود ولی چون بعضی از سایت های قدیمی از این تگ استفاده می کنند، همچنان در مرورگر ها پشتییبانی می شود. این تگ deprecate شده است، پیشنهاد می کنیم در صفحات وب سایت خود از این تگ استفاده نکنید.
Marquee شامل opening tag و closing tag است و در بین تگ body نوشته می شود :
[html]
<marquee>marquee |A deprecated html tag</marquee>
[/html]
صفات marquee
width – height
به وسیله صفت width می توانیم طول تگ marquee و با صفت height ارتفاع آن را مشخص کنیم.
مثال :
[html]
<marquee width="40%">marquee |A deprecated html tag</marquee>
[/html]
در این مثال تگ marquee چهل درصد صفحه وب سایت را از لحاظ طول در بر می گیرد.
direction
به وسیله این صفت می توانیم جهت حرکت marquee را مشخص کنیم. به عنوان مثال ما برای متن های فارسی از مقدار right برای این تگ استفاده می کنیم :
[html]
<marquee width="40%" direction="right" >marquee |A deprecated html tag</marquee>
[/html]
می بینیم جهت تگ اکنون به راست است .
صفت direction، علاوه بر مقدار right و left می تواند مقدار up و down را نیز بگیرد.
Behavior
صفت بعدی Behavior است که مقدار پیش فرض آن scroll است.
مقدارslide
[html]
<marquee width="40%" direction="right" behavior="slide">marquee |A deprecated html tag</marquee>
[/html]
به وسیله این مقدار، متن حرکت خود را تا جایی که فضا دارد یکبار طی می کند و سپس می ایستد.
مقدار alternate
<marquee width=”40%” direction=”right” behavior=”alternate”>marquee |A deprecated html tag</marquee>
به وسیله این صفت، متن حرکت خود را تا جایی که فضا دارد یکبار طی می کند و سپس باز میگردد. در واقع حرکت رفت و برگشت دارد.
توجه کنید که در حال حاضر در طراحی صفحات وب در سایت های جدید از جاوا اسکریپت و جی کوئری برای متحرک سازی متون و تصاویر استفاده میشود.
دسترسی سریع :
- آموزش قبلی : فیلم آموزش نحوه استفاده از جی کوئری و جاوا اسکریپت (jQuery-JavaScript) در HTML
- آموزش بعدی : فیلم آموزش نحوه نوشتن توضیحات شرطی برای ie در HTML
- لیست فیلم ها : فیلم های آموزش جامع HTML
سلام ببخشید میشه در مورد مطالب مرتبط که در این صفحه هستند بگید مطالبش چطوری متحرک میشه گه میشه کدش ب ایمیلم بفرستید با تشکر8
چرا این تگ در گوگل کروم به درستی کار نمیکنه؟
این تگ جز تگ های منقضی شده هست و عملا استفاده نمیشه. باید برای متحرک سازی از جاوااسکریپت استفاده کنید.
با سلام
من متنهای marquee را از پایگاه داده میگیرم و بدیهی است که ممکن است چند رکورد در جدول موجود باشد. ولی زمان اجرا متنها را زیر هم نمایش میدهد و با هم حرکت میکنند در صورتی که من میخواهم متنها پشت سر هم و یکی پس از دیگری به حرکت درآیند. آیا خاصیتی برای این کار وجود دارد؟
سلام. با استفاده از کدهای جاوااسکریپت میتونید این کار رو انجام بدید.
ممنون بسیار کاربردی بود
ممنون از توضیحات
موفق باشید
سلام درودوخسته نباشید به همتون امیدوارم موفق باشید واقعا دمتو ن گرم خداقوت انلاینری ها خداییش گل کاشتین واقعا سایت عالی هستش
ی درخواستی داشتم اگ زحمتی نیست لطفا نمونه از سایت ساخته شده با html همراه با کداشونو به اشتراک بزارید ممنون میشم ی دنیا مرسی
ساغولاسوز