با سلام. به دهمین مثال از مجموعه مثال های دوره ی آموزش سریع Java Script خوش آمده اید. این مثال درمورد روش حرکت دادن و تغییر محل قرار گیری یک تصویر با کلیک ماوس می باشد، بطوریکه تصویر مورد نظر بصورت تدریجی و انیمیشن گونه، از یک مکان به مکان دیگر حرکت کند. درواقع ما در این مثال از تصویر یک گل استفاده کرده ایم بطوریکه در هر کلیک به تدریج، به محل جدید حرکت خواهد کرد.
کدهای HTML و Java Script شکل 1 را در Notepad تایپ کنید (من خودم برای خوانایی بهتر کدها، از محیط Visual Studio استفاده کرده ام) و سپس آنرا در دسک تاپ تحت نام Test10.html و نوع فایل (*.*) All Files ذخیره کنید.
شکل 1. کدهای HTML و Java Script مربوطه
در محیط نرم افزار Microsoft Paint تصویر یک گل را مشابه آنچه در شکل 2 ملاحظه می کنید را نقاشی کرده و آنرا در کنار فایل Test10.html (در دسک تاپ) با نام و پسوند Pic01.png ذخیره کنید.
شکل 2. فایل Pic01.png
با دابل کلیک بر روی فایل ایجاد شده در دسک تاپ (فایل Test10.html)، خروجی را در مرورگر پیش فرض، بصورت شکل 3 ملاحظه خواهید کرد. حال تصویر گل به هر نقطه ای از مرورگر که شما کلیک کنید، بصورت تدریجی و انیمیشن وار، منتقل خواهد شد.
شکل 3. جابجایی محل قرار گیری تصویر با هر کلیک، بصورت انیمیشن
همچنین برای اجرای کد بالا بر روی وب سایت ما، می توانید >> اینجا << کلیک کنید.
موفق باشید.
نوشته شده توسط: مهندس عبدالرضا قنبری
تاریخ های بروز رسانی این صفحه
- 09 April 2018 - 1397/01/20