مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

مفهوم Marquee در html - ساخت متن و تصویر متحرک



قبل از هر چیز بهتر است مفهوم تگ Marquee  درک کنید .

مفهوم  Marquee  در html چیست؟

marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و... در صفحات HTML به صورت های مختلف، از جمله اسکرول در جهت عمودی، افقی، چپ و راست، با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب به خوبی پشتیبانی می شود.

Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن و یا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد و توسط تگ <fmarquees> مربوط به HTML ایجاد می شود.

ممکن است تگ Marquee در html  توسط همه ی مرورگر ها پشتیبانی نشود. توصیه میکنیم بر استفاده از این تگ ، تکیه نکنید .در عوض میتوانید از css  و جاوا اسکریپت استفاده کنید .

سینتکس ساده برای استفاده از تگ <marquees> در HTML مانند زیر می باشد:

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

مشخصه های تگ  <marquee>

در زیر لیست مهمی از ویژگی های تگ <marquee>   را می توانید مشاهده کنید :

  • Width  : این مشخصه عرض marquee را مشخص میکند . می تواند مقداری بین 10 تا 20 درصد بگیرد .
  • Height  : این مشخصه طول marquee را مشخص میکند . می تواند مقداری بین 10 تا 20 درصد بگیرد .
  • Direction  : این ویژگی مسیری را که marquee باید در آن اسکرول شود تعیین می کند. می تواند مقداری مانند left  ، right  ، up  و down  باشد .
  • Behavior : این ویژگی نوع اسکرول marquee را تعیین می کند. می تواند مقداری مانند scroll، side و alternate داشته باشد.
  • Scrollamount : سرعت متن marquee را تعیین می کند. می تواند مقداری مانند 10 داشته باشد.
  • Bgcolor : این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند.
  • Vspace : این ویژگی فضای عمودی اطراف marquee را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.

 

مثال 1 :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

 

مثال 2 :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

علاوه بر ویژگی هایی که تا این لحظه گفتیم، در تگ marquee از دو ویژگی ساده، مبتنی بر جاوا اسکریپت نیز می توانیم برای کنترل حرکت متن، زمانی که موس خود را روی آن می بریم، استفاده کنیم، ویژگی onmouseover و onmouseout سبب می شوند که کنترل رفتار بلاک را  هنگامی که کاربر ماوس خود را جهت کلیک کردن بر روی باکس متحرک می برد، در اختیار داشته باشیم، به اینصورت که پس از بردن ماوس، متن متحرک متوقف شود و با خارج شدن ماوس، دوباره به حرکت اسکرولی خود، ادامه دهد؛ بدین منظور باید مقادیر زیر را برای onmouseover و onmouseout تنظیم کنیم.

مثال زیر را در نظر بگیرید :

<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 2, 0)"> Moving Text
 </marquee>

 

فصلِ: 5 , تعداد قسمت ها: 75 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 4 , تعداد قسمت ها: 165 , سطح: صفر تا صد

این فصل در یک نگاه:

پیاده سازی سیستم mvc -(آشنایی با دستورهای isset- unset-require-method_exists-filter_var-trim-explode-self)- طراحی پنل مد…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 5 , تعداد قسمت ها: 47 , سطح: صفر تا صد

این فصل در یک نگاه:

آموزش ایجاد Child Theme برای قالب اصلی و ویرایش قالب و ترجمه و راست چین کردن قالب های خارجی…

آموزش صفر تا صد طراحی وبسایت خبری و فروشگاهی با وردپرس و ووکامرس   سرفصل های مجموعه طراحی سایت ۱. فصل اول ( طراحی UI/UX در فتوشاپ ) درباره وردپرس UI/UX چیست؟ آشنایی با سندها…
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09337316634 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به تلگرام کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید