انیمیشن ها در صفحات وب دو دسته هستند: ۱- انیمیشن متن ، ۲- انیمیشن تصاویر. در این جلسه با یک نمونه ساده از انیمیشن متن و تصویر آشنا می شوید. مطالبی که در این جلسه می خوانیم:
انیمیشن تصویر
انیمیشن متن
انیمیشن تصویر:
جایگزینی تصاویر:
در مثال زیر پس از بارگذاری صفحه، یک تصویر نمایش داده شده و پس از ۵ ثانیه تصویر عوض می شود.
| ۰۱ < 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 > |
در اینجا هم، دستورات مانند کد جایگزینی تصویر است، با این تفاوت که در اینجا برای ذخیره جمله ها از آرایه و برای نمایش آن از یک کادر متن در فرم استفاده می کنیم.
