Scribd
Upload
17 views3 pages

Slow Movements of Elements

Hshsjdjjdjd

Uploaded by

Chandrakala SV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views3 pages

Slow Movements of Elements

Hshsjdjjdjd

Uploaded by

Chandrakala SV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

SLOW MOVEMENTS OF ELEMENTS

With JavaScript we can not only move the elements instantly, we can also move
element slowly from one place to another. The one way to move an element slowly is to
move it by small amount many times, with moves separated by small amounts of time.
Such slow movement of elements is accomplished by using two window methods
available in JavaScript: setTimeout and setInterval.

The setTimeout method has two parameters -- first one is string of JavaScript code to
be executed and second parameter is number of mseconds of delay before executing the
given script.

The setInterval method has two forms. One takes two parameter with first specifying
the script code to be executed and second specifying the interval in mseconds between
executions. The second form takes variable number of parameters. First one is the name
of the function to be called, the second is the interval in mseconds between the calls to
the function and remaining parameter are used as actual parameters to the function being
called.

In the following example, image is moved slowly from position(50,100) to a new


position (700,100). The move is accomplished by using the setTimeout method to call a
move function every msecond until the final position is reached. Example includes
separate html file and JavaScript file.

Initial position of the element is set with initImage( ) function. The onload attribute of
the body element is used to call this function.

The moveImage( ) function is used to move the image. It moves the image 1 pixel
towards the final position and then calls itself with the new coordinates using the
setTimeout.

/* moveImage.js JavaScript to move image*/

var dom, x, y, finalx = 700;

function initImage() {
dom = document.getElementById('image').style;

/* Get the current position of the image */


var x = parseInt(dom.left);
var y = parseInt(dom.top);
/* Call the function that moves it */
moveImage(x, y);
}
// A function to move the text from its original
// position to (x, finaly)

function moveImage(x, y) {

/* If the x coordinates are not equal, move


x toward finalx */

if (x != finalx)
x++;

if ((x != finalx) ) {

dom.left = x + "px";
dom.top = y + "px";

/* Recursive call, after a 1-millisecond delay */

setTimeout("moveImage(" + x + "," + y + ")", 1);


}

<?xml version = "1.0" encoding = "utf-8"?>


<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Illustrates a moving image from one position to another


Uses the JavaScript from file moveimage.js
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Moving Image </title>
<script type = "text/javascript" src = "moveimage.js">
</script>
</head>
<body onload = "initImage()">
<p>
<span id = 'image' style = "position: absolute; left: 50px; top: 100px">
<img src = "smiley.gif" />
</span>
</p>
</body>
</html>

Source : http://elearningatria.files.wordpress.com/2013/10/cse-vii-programming-the-web-10cs73-
notes.pdf

You might also like