Applications of DOM

Animations

We can also develop some simple animations by varying some of the attributes value of an image. The image used here moves according to the traits defined in the function. We will explain the code after demo :-

<script type='text/javascript'>

function moveitBy(obj, x, y){
obj.style.left=parseInt(obj.style.left)+x+'px';
obj.style.top=parseInt(obj.style.top)+y+'px';
}

function moveitTo(obj, x, y){
obj.style.left=x+'px';
obj.style.top=y+'px';
}

</script>

<div id='hoverimage' style='position: relative; left: 0; top: 0'><img src='balloon.png' /></div>

<ul>
<li><a href='javascript:moveitBy(document.getElementById('hoverimage'), 5, 0)'>Move by 5px (right)</a></li>
<li><a href='javascript:moveitBy(document.getElementById('hoverimage'), -5, 0)'>Move by 5px (left)</a></li>
<li><a href='javascript:moveitTo(document.getElementById('hoverimage'), 0, -100)'>Move to 100px (top)</a></li>
<li><a href='javascript:moveitTo(document.getElementById('hoverimage'), 0, 0)'>Move to original position (left)</a></li>
</ul>

Clearly, onclick event handler triggers the specific function and passes the DOM object along with specifications for amount of movement required. The function then adjusts the distance of the image from the left or top. We can use a series of these motions to develop some good piece of animations. We hope you enjoyed our basics for DOM introduction.

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review