ایجاد پبام متحرک ۲
مقدمه
در مقاله ی قبلی یاد گرفتیم که چطور پیام متحرک نوع ۱ را بسازیم . در این مقاله قصد داریم پیام متحرک نوع ۲ را آموزش دهیم .
برای اینکه بفهمید که ما دقیقا چه چیزی را می خواهیم بسیازیم به مثال زیر توجه کنید . ما در مثال زیر می خواهیم متن متحرک را آموزش دهیم .
اگر با دستور innerHTML آشنا نیستید ابتدا مقاله ی : دستور innerHTML را بخوانید .
گام اول
برای نوشتن کد ها ابتدا تگ های اصلی سند html را می نویسیم :
کد 1.1
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
گام دوم
ابتدا یک تگ <marquee> در قسمت بین تگ <body> می نویسیم . توجه کنید که ما به تگ <body> ، به اختصار body می گوییم . body به معنی بدنه است .
و سپس id تگ <marquee> را برابر با marq که یک نام دلخواه است قرار می دهیم .
کد 2.1
<html>
<head>
<style>
</style>
</head>
<body>
<marquee id="marq"></marquee>
</body>
</html>
اکنون تگ حرکت دهنده ی متن آماده شد . حال باید جهت حرکت متن و نوع حرکت آن و ... را مشخص کنیم .
کد 2.2
<html>
<head>
<style>
</style>
</head>
<body>
<marquee id="marq" direction="right" behavior="scroll" loop="infinite"></marquee>
</body>
</html>
در کد های بالا direction جهت حرکت متن را مشخص می کند . که در اینجا right است یعنی حرکت به سمت راست است .
bahavior نوع حرکت را مشخص می کند . که در اینجا scroll انتخاب شده و به معنی این است که متن بطور ساده عبور کند تا پنهان شود .
loop مشخص می کند که پیام ما چند بار به نمایش در بیاید . infinite به معنی بی نهایت است . می توان به جای آن ۲ یا هر عدد دیگری را قرار داد
که در آن صورت ۲ بار متن نمایش می یابد .
گام سوم
در این گام می خواهیم متن مورد نظر خود را به تگ <marquee> اضافه کنیم . بدین منظور ما می توانیم متن مورد نظر را بین دو تگ <marquee> و </marquee> قرار دهیم . یا می توانیم از جاوا اسکریپت استفاده کنیم . که در زیر ما از جاوا اسکریپت استفاده کرده ایم :
کد 3.1
<html>
<head>
<style>
</style>
</head>
<body>
<marquee id="marq" direction="right" behavior="scroll" loop="infinite"></marquee>
<script>
var marq=document.getElementById("marq");
marq.innerHTML="متن مورد نظر";
</script>
</body>
</html>
تشریح کد ها : در بین تگ های <script> و</script> دو خط کد اضافه کردیم . در خط اول یک متغیر دلخواه ایجاد کرده و نام آن را به دلخواه
marq می گذاریم سپس با استفاده از دستور getElementById تگ <marquee> را می گیریم و برابر با متغیر marq قرار می دهیم .
سپس با استفاده از دستور innerHTML متن مورد نظر خود را به عنصر <marquee> اضافه می کنیم .
گام چهارم
در این گام می خواهیم اندازه و مکان و رنگ پیش زمینه تگ <marquee> را تغییر دهیم . پس وارد عمل شده و از سی اس اس استفاده می کنیم .
Title
<html>
<head>
<style>
body{
background-color:#154bc1;
}
#marq{
position:absolute;
width:300px;
height:27px;
left:30px;
top:5px;
border:1px solid black;
background-color:white;
}
</style>
</head>
<body>
<marquee id="marq" direction="right" behavior="scroll" loop="infinite"></marquee>
<script>
var marq=document.getElementById("marq");
marq.innerHTML="متن مورد نظر";
</script>
</body>
</html>
- نوشته شده توسط احسان عباسی
- بازدید: 20209
دیدگاه‌ها
سلام
آیا تگ marquee در html5 پشتیبانی میشود؟
در مرجع تگ های html تگmarqueeنبود میشود بگویید چگونه از این تگ استفاده کنیم؟
سلام.
کد زیر یه مثال ساده از نحوه استفاده تگ marquee میباشد:<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction=" ;up">Th e direction of text will be from bottom to top.</marquee>
</body>
</html>
سلام
تگ marquee در html5 پشتیبانی نمی شود.
ایا جایگزینی برای تگ marquee در html5 وجود دارد ؟
خیر، برای متحرک سازی باید از CSS3 استفاده کنید. به مثال زیر توجه کنید:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss3_animation3
برای اطلاعات بیشتر در این مورد به مطلب زیر مراجعه فرمایید:
www.beyamooz.com/css3/657-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AF%D8%B1-css3
نهایتاً برای استفاده از تگ marquee در HTML5 محدودیتی وجود ندارد، یعنی تقریباً تمام مرورگهای معروف از marquee پشتیبانی می کنند.
چه خوب بود ولی marquee فک کنم دیگه منقضی شده درسته ؟
بله این تگ غیر استاندارد هست .اما در سایت های زیادی هنوز استفاده می شود .