Kids

Can

JavaScript

<-----Back        Next --->

Flying Things

Hopping

example1:

Click button below to move the image to right

The Bunny hops by increasing its left position propertry:

 function 
 moveRight(){ 


 var 
 img 
 = 
 document.getElementById('myImg') 
 ; 


 img 
 . 
 style 
 . 
 left 
 = 
 parseInt( 
 img.left 
 ) 
 + 10 
 + ' px ' 
 ; 
 } 

We get it and then set it again with a new bigger value.


In the Image Tag we set style's left and position properties.

 <img 
 style= 
 " 
 left 
 : 
 0px 
 ; 
 position 
 : 
 relative 
 " 
 ......... 
 /> 

There are more properties that help you position elements on the screen:




Help the Bunny Hop......... .... "TryoutPanel1"
<script> function moveRight(){ var img = document.getElementById('myRabbit'); // get the IMAGE img.style.left = parseInt(img.style.left) + 50 + 'px'; // change its LEFT property // parseInt turns eg: '5px' to 5 } // stick px back on with +'px' </script> <button onclick=" moveRight(); " >Click Me</button><br> <img id="myRabbit" style=" position:relative; left:0px ; height:150px" // note the LEFT and POSITION props ! src="/pics/hopping-rabbit.jpg"/> <p> <ul><li>Try to change the <u>distance</u> the Bunny hops.(7)</li> <li>Try to make Bunny hop to the <u>right</u>(7).</li> <li>Replace style.left by: <b>style.right, style.bottom, style.top </b>(16,7)</li></ul> <br> </p>





Animation

example2:



For Animation there are 2 Methods that you need to know :

To start Moving : setTimeout(moveRight,20) : this will have a time out of 20 miliseconds and then call the moveRight function.

 function 
 moveRight() { 


 fishImg 
 = 
 document.getElementById(' myFish') 
 ; 


 fishImg.style.left 
 = 
 parseInt(fishImg.style.left) + 10 +'px'  
 ; 


 animate 
 = 
 setTimeout( 
 moveRight 
 , 
 20 
 ) 
 ; 
 } 

To stop : clearTimeout(animate);

 function 
 stop() { 
 clearTimeout( 
 animate 
 ) 
 ; 
 } 

animate is just a var name that we will point at the setTimeout method.


Make fishImg and animate global variables (outside functions, inside <script> tag)
so they can be accessed by both the moveRight() and stop() functions.

 <script> 
 var 
 animate 
 ; 
 var  
 fishImg 
 ; 
 ........ 

That way they can be accessed by both the moveRight() and stop() functions.


Make my Fish Fly......... .... "TryoutPanel2"
<script type="text/javascript"> var imgFish = null; // global variables so all functions can access var animate ; function moveRight(){ imgFish = document.getElementById('myFish'); imgFish.style.left = parseInt(imgFish.style.left) + 10 + 'px'; //...to go diagonal increase imgFish.style.top property as well. animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop(){ clearTimeout(animate); // stop the setTimeout imgFish.style.left = '0px'; // set myFish back to start } </script> <img id="myFish" src="/pics/flying-fish.gif" style=" position:relative; height:80px; left:0px; top:0px " /> <br> <button onclick=" moveRight() " > Start </button> <button onclick=" stop() " > Stop </button> <br> <ul><li>Find 2 ways to make myFish go <u>faster</u>, <u>slower</u>(9,11)</li> <li> <u>Go diagonal</u>? add top-property to the img-tag and in the function(10,25)</li> <li>Experts: Make a <u>ZigZag function</u>. use if-statements</li></ul>




<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email