جستجو برای:
سبد خرید 0
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان

برای یاد گیری طراحی سایت از اینجا شروع کن

روز
ساعت
دقیقه
ثانیه
جشنواره فروش ویژه دوره ی html css به پایان رسید
مشاهده ی دوره

ورود

گذرواژه خود را فراموش کرده اید؟

ارسال مجدد رمز عبور یکبار مصرف (00:30)

ثبت نام

یک رمز به نشانی ایمیل شما فرستاده خواهد شد.

داده های شخصی شما برای پشتیبانی از تجربه شما در این وب سایت، برای مدیریت دسترسی به حساب کاربری شما و برای اهداف دیگری که در سیاست حفظ حریم خصوصی ما شرح داده می شود مورد استفاده قرار می گیرد.

ارسال مجدد رمز عبور یکبار مصرف (00:30)
  • 09338776735
  • info@wppush.ir
0
آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdf
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
عضویت و وورد

وبلاگ

آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdfوبلاگآموزش html cssآموزش تگ marquee در HTML

آموزش تگ marquee در HTML

7 شهریور 1401
ارسال شده توسط علی نریمانی
آموزش html css
آموزش تگ marquee در HTML+وردپرس پوش

آموزش تگ marquee در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ marquee در HTML به صورت کامل آشنا بشید.

تگ marquee در HTML

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

این تگ در HTML5 کلا منسوخ شده هست، هرچند در مرورگرها ازش پشتیبانی میشه و بدون مشکل کار میکنه و اجرا میشه، اما وقتی میگیم منسوخ شده یعنی ممکنه همین فردا مرورگرها کلا حذفش کنن، در نتیجه استفاده از آن توصیه نمیشه و لازمه بجای آن از CSS استفاده کنید.

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

مثال از تگ marquee در HTML

در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.

مثال شماره یک : حالت عادی و پیش فرض

<body>
 <marquee>
  سلام خوبی؟ به وبسایت آموزشی وردپرس پوش خوش آمدید
 </marquee> 
</body>

در مثال شماره دو : جهت شروع متن از سمت راست و متن بصورت پینگ پنگی ( از کادر بیرون نمیره )

<body>
 <marquee behavior="alternate" direction="right">
  سلام خوبی؟ به وبسایت آموزشی وردپرس پوش خوش آمدید
 </marquee>
</body>

و در مثال شماره سه : جهت شروع متن از سمت بالا به پایین

<body>
 <marquee direction="down">
  سلام خوبی؟ به وبسایت آموزشی وردپرس پوش خوش آمدید
 </marquee>
</body>

سپس مثال شماره چهار : تنظیم سرعت حرکت متن

<body> 
 <marquee scrollamount="20">
  سلام خوبی؟ به وبسایت آموزشی وردپرس پوش خوش آمدید
 </marquee> 
</body>

اما مثال شماره پنج : حرکت دادن عکس بجای متن ( عکس ها لینک دار هستن، یعنی میشه روشون کلیک کرد )

<body>
 <marquee>
  <a href="https://wppush.ir/"><img src="files/cat.gif"></a>
  <a href="https://wppush.ir/"><img src="files/cat.gif"></a>
  <a href="https://wppush.ir/"><img src="files/cat.gif"></a>
 </marquee>
</body>

در آخر مثال شماره شیش : کنترل کردن تگ Marquee با استفاده از جاوا اسکریپت ( مثلا رو دکمه کلیک میکنیم سرعت زیاد میشه و… )

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

پشتیبانی مرورگرها

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ marquee در HTML پشتیبانی میکنند یا خیر.

 

جدول پشتیبانی مرورگرها+وردپرس پوش

 

جدول صفات تگ marquee در HTML

در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.

 

جدول صفات تگ marquee+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

marquee از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

  • تگ marquee یک تگ منسوخ شده و غیراستاندارد در HTML بشمار میروند، هرچند این تگ بسیار باحال، جذاب و تو دل برو است اما به هر حال استفاده از آن توصیه نمی شود، و لازم است از CSS استفاده شود. ( همانند مثال های زیرین )

مثال های بیشتر – استفاده از CSS بجای تگ Marquee

ما به آسانی و با استفاده از CSS و ویژگی های Animation و Transform این توانایی رو پیدا میکنیم که دقیقا همانند تگ Marquee متن ها یا تصاویر را به حرکت دربیاوریم، که در ادامه میتوانید چندین مثال را مشاهده کنید.

مثال شماره یک : حرکت متن از سمت راست به چپ ( حالت Scroll )

@keyframes wppush {
 0%   { 
 transform: translateX(100%); 		
 }
 100% { 
 transform: translateX(-100%); 
 }
}

همراه با ما با مثال شماره دو : حرکت متن از سمت چپ به راست ( حالت Scroll )

@keyframes wppush {
 0%   { 
 transform: translateX(-100%); 		
 }
 100% { 
 transform: translateX(100%); 
 }
}

مشابه مثال بالا مثال شماره سه : حرکت متن از سمت بالا به پایین ( حالت Scroll )

div.box{
 overflow:hidden;
 position: relative;
}
 
div.box h2{
 animation: wppush 8s linear infinite;
 transform:translateY(100%);
 position: absolute;
 height: 100%;
}
 
@keyframes wppush {
 0%   { 
 transform: translateY(-100%); 		
 }
 100% { 
 transform: translateY(100%); 
 }
}

برعکس مثال بالا مثال شماره چهار : حرکت متن از سمت پایین به بالا ( حالت Scroll )

div.box{
 overflow:hidden;
 position: relative;
}
 
div.box h2{
 animation: wppush 8s linear infinite;
 transform:translateY(-100%);
 position: absolute;
 height: 100%;
}
 
@keyframes wppush {
 0%   { 
 transform: translateY(100%); 		
 }
 100% { 
 transform: translateY(-100%); 
 }
}

و آخرین مثال مثال شماره پنج : حرکت متن از سمت راست به چپ ( حالت پینگ پنگی یا alternate )

div.box h2{
 animation: wppush 3s linear infinite alternate;
}
 
@keyframes wppush {
 0% { 
 transform: translateX(70%); 		
 }
 100% { 
 transform: translateX(0%); 
 }
}

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

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها: آموزش cssآموزش css3آموزش htmlآموزش html cssآموزش html css پروژه محورآموزش html و cssآموزش html و css رایگانآموزش html5آموزش تگ marqueeآموزش تگ marquee در HTMLتگ marqueeتگ marquee در HTML
قبلی آموزش تگ kbd در HTML
بعدی آموزش تگ ins در HTML

دیدگاهتان را بنویسید لغو پاسخ

تمامی حقوق این وبسایت متعلق به وردپرس پوش می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://wppush.ir/?p=10417
ورود ×
کد تأیید
لطفا کد تأیید ارسال شده به را وارد کنید
ثبت
ورود با رمز عبور یکبار مصرف
ارسال مجدد رمز عبور یکبار مصرف(00:30)
حساب کاربری ندارید؟
ثبت نام

ارسال مجدد رمز عبور یکبار مصرف (00:30)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.

سوالی دارید؟ از ما بپرسید، کارشناسان ما همین حالا با شما تماس می گیرند.

تماس با ما

پاسخگوی شما هستیم

  • 09338776735
  • همه روزه از ساعت 9 صبح تا 12 شب
  • info@wppush.ir
question