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

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

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

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

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

به طور مثال :

<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>

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

پخش اختصاصی

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