سبد (0)

ایجاد پبام متحرک ۲

مقدمه 

در مقاله ی قبلی یاد گرفتیم که چطور پیام متحرک نوع ۱  را بسازیم . در این مقاله قصد داریم پیام متحرک نوع ۲ را آموزش دهیم . 

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

اگر با دستور 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>
خودتان امتحان کنید »

آموزش صوتی JavaScript

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه