জাভাস্ক্রিপ্টে বেসিক অ্যানিমেশন ইমপ্লিমেন্ট করতে DOM অবজেক্ট প্রোপার্টি এবং জাভাস্ক্রিপ্ট ব্যবহার করুন। নিচের তালিকায় বিভিন্ন DOM মেথড রয়েছে।
- আমরা জাভাস্ক্রিপ্ট ফাংশন getElementById() ব্যবহার করে একটি DOM অবজেক্ট পাই এবং সেটিকে একটি গ্লোবাল ভেরিয়েবল imgObj-এ অ্যাসাইন করি।
- আমরা একটি ইনিশিয়ালাইজেশন ফাংশন init() সংজ্ঞায়িত করি imgObj ইনিশিয়ালাইজ করার জন্য যেখানে আমাদের এর position এবং left অ্যাট্রিবিউট সেট করতে হবে।
- উইন্ডো লোড হওয়ার সময় ইনিশিয়ালাইজেশন ফাংশন কল করি।
- শেষে, moveRight() ফাংশন কল করে লেফট দূরত্ব ১০ পিক্সেল বাড়াই। আপনি এটিকে নেগেটিভ মানেও সেট করে বাম দিকে সরাতে পারেন।
<html> <head> <title>JavaScript Animation</title> <script> <!-- var imgObj = null; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; } window.onload =init; //--> </script> </head> <body> <form> <img id="myImage" src="/images/html.gif" /> <p>Click button below to move the image to right</p> <input type="button" value="Click Me" onclick="moveRight();" /> </form> </body> </html>