जावास्क्रिप्ट में मूल एनिमेशन को लागू करने के लिए, DOM ऑब्जेक्ट गुण और जावास्क्रिप्ट का उपयोग करें। निम्न सूची में विभिन्न DOM विधियाँ हैं।
- हम JavaScript फ़ंक्शन का उपयोग कर रहे हैं getElementById() एक DOM ऑब्जेक्ट प्राप्त करने के लिए और फिर उसे एक वैश्विक चर को असाइन करने के लिए imgObj.
- हमने एक इनिशियलाइज़ेशन फंक्शन परिभाषित किया है init() प्रारंभ करने के लिए imgObj जहां हमें इसकी स्थिति set सेट करनी होती है और बाएं विशेषताएँ।
- विंडो लोड के समय हम इनिशियलाइज़ेशन फ़ंक्शन को कॉल कर रहे हैं।
- आखिरकार, हम कॉल कर रहे हैं moveRight() बाईं दूरी को 10 पिक्सेल तक बढ़ाने का कार्य करता है। आप इसे बाईं ओर ले जाने के लिए इसे ऋणात्मक मान पर भी सेट कर सकते हैं।
<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>