40٪ تخفیف با کد Ketab بمناسبت هفته کتاب و کتاب خوانی ...
زمان باقی مانده
سبد (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>
خودتان امتحان کنید »

دیدگاه‌ها  

+3 # amin 1394-08-17 13:11
سلام
آیا تگ marquee در html5 پشتیبانی میشود؟
در مرجع تگ های html تگmarqueeنبود میشود بگویید چگونه از این تگ استفاده کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-08-17 15:20
سلام.
کد زیر یه مثال ساده از نحوه استفاده تگ 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-08-17 15:25
سلام
تگ marquee در html5 پشتیبانی نمی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amin 1394-08-17 15:28
ایا جایگزینی برای تگ marquee در html5 وجود دارد ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-08-17 15:33
خیر، برای متحرک سازی باید از 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 پشتیبانی می کنند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+10 # محمد احسان 1393-09-29 09:58
چه خوب بود ولی marquee فک کنم دیگه منقضی شده درسته ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+12 # 2احسان عباسی 1393-10-08 09:44
بله این تگ غیر استاندارد هست .اما در سایت های زیادی هنوز استفاده می شود .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

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

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