آموزش جاوا اسکریپت در یازده روز – روز دهم(ایجاد انیمیشن)

جمعه, ۲۷ام فروردین , ۱۳۸۹ | ۱۳ دیدگاه

سلام دوستان، امروز با جلسه دهم یعنی ایجاد انیمیشن در خدمتتون هستم. انیمیشن ها در صفحات وب دو دسته هستند: ۱- انیمیشن متن ، ۲- انیمیشن تصاویر. در این جلسه با یک نمونه ساده از انیمیشن متن و تصویر آشنا می شوید. مطالبی که در این جلسه می خوانیم:

  • انیمیشن تصویر
  • انیمیشن متن

انیمیشن تصویر:

جایگزینی تصاویر:
در مثال زیر پس از بارگذاری صفحه، یک تصویر نمایش داده شده و پس از ۵ ثانیه تصویر عوض می شود.

< html >
< head >
< script >
var x=0;
function setIn()
{
window.setInterval("changeImage()", 5000)
}
function changeImage()
{
++x;
if (x==4)
{
x=0;
}
var img= document.images[0];
img.src="pic"+x+".jpg";
}
< /script >
< /head >

در ابتدا در تابع setIn از دستور setInterval استفاده کردم،(با این دستور در جلسه ۴ آشنا شدید) این دستور باعث می شود که تابع changeImage هر ۵ثانیه یک بار، اجرا شود.
تابع changeImage: این تابع پس از هر بار اجرا یک واحد به متغیر x اضافه کرده و مقدار خصوصیت Imageشیء document را در متغیر img می ریزد،سپس آدرس این خصوصیت رامشخص می کند.

نکته:
توجه کنید که تصاویر شما باید دارای یک نام یکسان با شماره های متفاوت باشند. همچنین تمامی تصاویر دارای پسوند یکسان باشند.

من دراینجا ۴ تصویر با نام های pic0، pic1 ، pic2 و pic3 دارم. که در خط زیر با قراردادن مقدار متغیر x در کنار نام pic مشخص کردم که هر بار یکی از تصاویر نمایش داده شود. در واقع هر بار که یک واحد به متغیر x اضافه می شود تصویر جدیدی نمایش داده می شود.

دستور if: این دستور وقتی مقدار x 4می شود، یعنی جاوا به آخرین تصویرمی رسد، اجرا شده و مقدار x را به صفر تغییر می دهد و دوباره تصویر اول نمایش داده می شود. برای مشاهده صفحه اینجا را کلیک کنید.

< body onLoad="setIn(5000)" >
< p align="center" >
< img id="changeme" src="pic0.jpg" / >
< /p >
< /body >
< /html >

در رویداد onLoad تابع setIn فراخوانی شده و با تگ img اولین تصویر را نمایش می دهیم.

انیمیشن متن:

علاوه بر تصاویر با کمک متن ها نیز می توان انیمیشن ایجاد نمود. با استفاده از کد زیر می توان متن موجود در صفحه را نیز تغییر داد. نتیجه

< script > < head > var x=0
var A=new Array(4);
A[0]=" جمله ۱"
A[1]=" جمله ۲"
A[2]=" جمله ۳"
A[3]="جمله ۴"
function setIn()
{
window.setInterval("changeText()", 5000)
}
function changeText()
{
++x
if (x==4)
{ x=0 }
document.form1.t1.value=A[x];
}
< /script >
< /head >
< body onload="setIn()" >
< form name="form1" >
< textarea rows=5 cols=50 name="t1" align="right" style="font-family:tahoma;color:royalblue" dir="rtl" >
جمله ۱
< /textarea >
< /form >
< /body >

در اینجا هم، دستورات مانند کد جایگزینی تصویر است، با این تفاوت که در اینجا برای ذخیره جمله ها از آرایه و برای نمایش آن از یک کادر متن در فرم استفاده می کنیم.

پستهای مرتبط :

آموزش جاوا اسکریپت در یازده روز – روز اول

آموزش جاوا اسکریپت در یازده روز – روز دوم

آموزش جاوا اسکریپت در یازده روز – روز سوم

آموزش جاوا اسکریپت در یازده روز – روز چهارم

آموزش جاوا اسکریپت در یازده روز – روز پنجم

آموزش جاوا اسکریپت در یازده روز – روز ششم (توابع)

آموزش جاوا اسکریپت در یازده روز – روز هفتم (حلقه های تکرار)

آموزش جاوا اسکریپت در یازده روز – روز هشتم(آرایه ها)

آموزش جاوا اسکریپت در یازده روز – روز نهم(کوکی ها)

Be Sociable, Share!


۱۳ دیدگاه


  1. مصطفی
    ۲ اردیبهشت ۱۳۸۹

    ممنون دانشجوی کامپیوترم آنلاینم دوست دارم با هم کانکت شیم




  2. محمد
    ۲۱ اردیبهشت ۱۳۸۹

    کارتون خیلی خوبه.فقط یه ذره کند کار میکنید.ممنون میشم اگه جلسه یازدهم رو هم بزارید
    ممنون




  3. کامران
    ۲۱ اردیبهشت ۱۳۸۹

    جلسه یازدهم فردا روی سایت قرار میگره




  4. ali
    ۳۰ مرداد ۱۳۸۹

    سلام
    با تشکر از زحماتتون من امرزو با این سایت آشنا شدم
    من کد متن در حال تایپ رو نوشتم به طور مثال شما اینجا ۴ جمله بعد چند ثانیه مکث به ترتیب ظاهر میشه ولی در کد من ۴متن به ترتیب از راست به چپ تایپ میشه کاری که من می خوام انجام بدم اینه که برای هر متن یه صفحه لینک کنم مثل سایت دانشگاه تهران اگر لازم باشد کد را براتون می فرستم
    با سپاس




  5. عاطفه
    ۳۱ مرداد ۱۳۸۹

    سلام
    شما کدی که نوشتین رو به ایمیل من بفرستید.
    atefe.july@yahoo.com




  6. نام (لازم)
    ۷ دی ۱۳۸۹

    سلام
    من میخوام یه توپ متحرک طراحی کنم
    مثلا توپ از یه طرف صفحه بیاد و بره تو دروازه
    لطفا راهنمایی کنید که چطوری طراحیش کنم
    مرسی




  7. شیوا
    ۶ بهمن ۱۳۸۹

    سلام احتیاح ضروری به انیمیشن ساده دارم کمکم کن توروحدا ۴روز وفت دارم




  8. عاطفه
    ۷ بهمن ۱۳۸۹

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

    شیوا جان شما چه انیمیشنی میخوای طراحی کنی؟




  9. kamran
    ۹ اسفند ۱۳۸۹

    من که رسما مغزم تعطیل شد
    !




  10. عاطفه
    ۱۰ اسفند ۱۳۸۹

    چرا آقا کامران؟ شما توکدوم قسمتش مشکل داری؟




  11. kamran
    ۱۴ اسفند ۱۳۸۹

    دستتتون درد نکنه
    واقعا زحمت میکشین
    اما کلا” واسه من سنگینه
    باز هم تشکر




  12. نام (لازم)
    ۱۷ اسفند ۱۳۸۹

    salam man ye site tarahi kardam alan mikham oono upload konam ama nemidoonam chetori in karo anjam bedam . age shoma mitoonin lotfan komakam konid
    mamnoon




  13. mohammad
    ۲ آذر ۱۳۹۰

    سلام ، یه سوال من هم تقریبا همین کد رو نوشتم، ولی وقتی توی body اون onload رو می زارم نتیجه نمی گیرم، توی یه صفحه خالی یگه که css ندارم امتحان می کنم حله، جاواشم کار می کنه، ولی تو صفحه اصلی که css داره مثل اون fade نمیشه، میشه کمک کنید.



دیدگاه خود را بنویسید