CSITQuestions Free Education For Everyone
| We can create animations also using JavaScript. It is a rich language to program an animation. In the below given two programs an image is flipped with angular rotations. We have used cos() & sin functions of Math Object.There are few examples of animation given below. |
| Example: |
| <html>
<head><title>Animation</title> </head> <body background=”pic.jpg” onload=”setInterval(‘ff()’,10)”> <img name= “im1″ id =”m1″ src=”pic.jpg” width=200 height=200 style=”position:absolute;left:100;top:300;width:100;height:100;”> <img name =”im2″ id =”m2″ border=3 src=”pic.jpg” width=200 height=200 style=”position:absolute;left:520;top:320;width:15;height:15;”> <script> var angle=0 var angle2=50 var a=document.all.m1.style; var b =document.all.m2.style; function ff() { if(angle<581) { angle++ } else { angle=0 }
if (a.pixelLeft<=700 && a.pixelTop<500) { a.pixelLeft=angle+Math.cos(angle) a.pixelTop=angle+Math.sin(angle) } else { a.pixelLeft=10 a.pixelTop=50 } pp() }
function pp() { if (b.pixelLeft<600 && b.pixelLeft>0) { b.pixelLeft=angle2+Math.sin(angle) b.pixelTop=angle2+Math.cos(angle2) }
} </script> </body> </html> |
| Click here to view the result of this program on browser |
| Example: |
| <html>
<head> <script language=”JavaScript”> var x,y; y=x=0;
function ff() { var t=document.all.m1.style; if(x<250) { t.pixelTop=(240-(x/2))-(t.pixelTop/4); t.pixelLeft=(320-(y/2))-(t.pixelLeft/4); t.width=x; t.height=y; x++; y++; } else { x=x-15; y=y-15; } } </script> </head> <body bgcolor=”gray” onLoad=”setInterval(‘ff();’,1)”> <img id=”m1″ src=”pic.jpg” style=”position:absolute;width:100;height:100;”> </body> </html> |
Check Also
Functions Returning Values In Java Script
Function is a set of statements recognized by a name and can be used as …