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

چاپ

مقدمه 

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

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

اگر با دستور 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>
خودتان امتحان کنید »
نوشته شده توسط احسان عباسی
بازدید: 19905