جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش تگ متحرک ساز Marquee ( ساده ولی کاربردی html – قسمت 11 )

با سلام . این جلسه یازدهم از سری آموزش های ساده ولی کاربردی html می باشد که از سایت اسکریپت دات کام منتشر میشود .

در این قسمت تگی جالب و متحرک از html به نام marquee را معرفی میکنم . این تگ باعث میشود نوشته , عکس و هر چیزه دیگری را که دوست دارید در دو حالت افقی و عمودی در وب به حرکت در بیاورد .

این تگ به صورت Container و block Level می باشد .

آموزش زبان html - ساده و کاربردی

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

به طور مثال :

<marquee>
    <p>وحید مجیدی</p>
</marquee>

اما این تگ دارای اتربیوت هایی هم می باشد از جمله :

behavior : که دارای 3 مقدار می باشد ->

  • alternate = که باعث می شود حرکت به صورت رفت و برگشتی صورت پذیرد .
  • scroll = این مقدار باعث میشود که تگ مورد نظر از یک طرف وارد و از طرف دیگر خارج شود .
  • slide = که باعث میشود تگ مورد نظر از یک طرف وارد شود و به محض رسیدن به پایان راه متوقف و بایستد .

direction : که دارای 4 مقدار زیر می باشد ->

  • up = حرکت از پایین به سمت بالا
  • down = حرکت از بالا به سمت پایین
  • left = حرکت از راست به چپ
  • right = حرکت از چپ به راست

loop : که دارای 2 نوع مقدار می باشد ->

  • 1- = یعنی این کار بی نهایت بار انجام شود .
  • عددی از بین 1 تا بی نهایت به دلخواه شما = یعنی این کار به تعداد عددی که شما داده اید تکرار می شود .

scrollamount : این خاصیت فاصله بین هر فریم را مشخص میکند که عددی از 1 به بالا را میپذیرد . طبیعتا هر چه مقدار را بیشتر بدهیم , سرعت بالاتر میرود .

scrolldelay : این خاصیت میتواند در بین هر فریم که در بالا بیان شد , تاخیری بر حسب میلی ثانیه ایجاد کند . مثلا اگر 1000 را وارد نمایید , 1 ثانیه تاخیر می اندازد .

width : مقدار عرض را بر حسب px یا % مشخص میکند که در صورت قرار نگرفتن این خاصیت , عرض آن به مقدار پدر خود است .

height : مقدار ارتفاع را بر حسب px یا % مشخص میکند که در صورت قرار نگرفتن این خاصیت , ارتفاع آن به مقدار نوشته های داخل آن می باشد .

Bgcolor : رنگ پس زمینه را مشخص میکند ( این خاصیت در html5 منسوخ و به css انتقال پیدا کرده است )

hspace : میزان فاصله قسمت راست و چپ marquee نسبت به تگ های اطراف را بر حسب px یا % مشخص میکند.

vspace : میزان فاصله قسمت پایین و بالا marquee نسبت به تگ های اطراف را بر حسب px یا % مشخص میکند.

truespeed : معمولا مرورگرها مقادیر کمتر از 60 برای scrolldelay را در نظر نمیگیرند و اگر مقداری کمتر از 60 را وارد کنیم، مرورگر آن را 60 در نظر خواهد گرفت . ولی ما میتوانیم با به بکارگیری خاصیت truespeed که بدون مقدار ( None Value ) می باشد , مرورگرها را مجبور میکنیم تا همان عددی را که در صفت scrolldelay مشخص کرده ایم در حرکت تاثیر بدهد .

در پایان یک مثال کلی میزنیم :

<marquee direction="left" behavior="alternate" bgcolor="#eee" hspace="300" height="80" scrollamount="50" scrolldelay="1000" truespeed loop="-1">
    <h1>وحید مجیدی - اسکریپت دات کام</h1>
</marquee>

 دموی نمایش کد بالا

پخش اختصاصی

آموزش : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

6 پاسخ به “آموزش تگ متحرک ساز Marquee ( ساده ولی کاربردی html – قسمت 11 )”

  1. خیلی ممنون لطف کردید. متشکرم گفت:

    خیلی ممنون لطف کردید. متشکرم

  2. احمدرضا گفت:

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *