How to navigate an image using javascript?

I am developing a simple web quiz and using javascript, I would like to create an effect that displays a small image (1UP) that wanders around the "game deck" when users reach a certain level or rating; the user can get extra life by simply clicking on it in time.

Do you know any jQuery plugin or javascript snippet to achieve this effect?

+3
source share
2 answers

This is actually surprisingly easy:

Create an element:

img = document.createElement('img'); 

Set your source:

 img.src = "myimage.png"; 

Position it absolutely like this:

 img.style.position = "absolute"; img.style.left = "50px"; img.style.top = "50px"; img.style.width = "50px"; // Make these match the image... img.style.height = "50px"; // ...or leave them off 

(Obviously, use whatever coordinates and size you want.)

You might want to make sure that it appears above other things:

 img.style.zIndex = 100; // Or whatever 

Add it to the document:

 document.body.appendChild(img); 

Move it around

Use window.setInterval (or setTimeout depending on how you want to do this) to move it by changing the style.left and style.top . You can use Math.random to get a random floating-point number between 0 and 1 and multiply this and run it through Math.floor to get an integer to change the coordinates.

Example

This creates an image at 50.50 and enlivens it (in a very inconvenient random way, I didnโ€™t waste time making it look elegant) every fifth of a second for 10 seconds, and then deleted it:

 function createWanderingDiv() { var img, left, top, counter, interval; img = document.createElement('img'); img.src = "myimage.png"; left = 200; top = 200; img.style.position = "absolute"; img.style.left = left + "px"; img.style.top = top + "px"; img.style.width = "200px"; // Make these match the image... img.style.height = "200px"; // ...or leave them out. img.style.zIndex = 100; // Or whatever document.body.appendChild(img); counter = 50; interval = 200; // ms window.setTimeout(wanderAround, interval); function wanderAround() { --counter; if (counter < 0) { // Done; remove it document.body.removeChild(img); } else { // Animate a bit more left += Math.floor(Math.random() * 20) - 10; if (left < 0) { left = 0; } top += Math.floor(Math.random() * 10) - 5; if (top < 0) { top = 0; } img.style.left = left + "px"; img.style.top = top + "px"; // Re-trigger ourselves window.setTimeout(wanderAround, interval); } } } 

(I prefer to reschedule at each iteration using setTimeout [as above] with setInterval , but that is completely your call. If you are using setInterval , remember the interval handle [return value from setInterval and use window.clearTimeout to cancel it when you're done .)

The above DOM / JavaScript; jQuery offers some helpers to make this a little easier, but as you can see it is pretty simple even without.

+8
source

There is also a jQuery function that can be used to move things.

See examples: http://api.jquery.com/animate/

+2
source

All Articles