TIME NOW
World current time now,
CALENDAR
Calendar monthly, yearly
login GOLD PRICE, RATE
login HOROSCOPE
login DICTIONARIES, LISTS
login SCIENCE EDUCATION RELIGION
login FINANCE, BUSINESS
login WORLD COUNTRIES, WIKI

HTML code examples, samples, tutorial

Previous articlePage bottomNext article  ALL TOPICS

Html. Javascript code example. Motion

 
HOW TO CREATE MOTION USING JAVASCRIPT?

1. Absolute position:
<IMG src="rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1" >
Code: CSS method.

2. Control ID:<script language = javascript>
function www(uuu){
alert ("id of current element is:" +uuu);
}
</script>
...
<IMG onmouseover="www(this.id);" src="rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%;">


Code: Javascript control ID.

3. Useage of getElementsById and top:
.....

function www(uuu){
var el = document.getElementById("bounce");
el.style.top =40* parseInt(uuu.substr(1,1));
//alert(parseInt(uuu.substr(1,1)));
}
.....
<IMG src="rut5.gif" width="53" height="53" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1">
.....
<a id = a1 href="#" onmouseover= "www(this.id);" >Javascript DHTML - Move mouse here</a>

Code: Javascript. Change of position:

4. Another case:
<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>
</HEAD>

<BODY onmouseover = "">
<script>
function doSomething(e) {
if (!e) var e = window.event;

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode;// defeat Safari bug

var el;
el = document.getElementById("bounce");
if ( "A" == targ.tagName){ el.style.top =40* parseInt(targ.id.substr(1,1)); }
//alert('Event type is ' + e.type + ' ' + targ.tagName )
}

var old = (window.onload) ? window.onload : function () {};

window.onload = function () {
old();
if (!document.getElementById) return;
document.getElementById('example').onmousemove = doSomething;

}

</script>
<IMG src="rut5.gif" ID="bounce" STYLE="position:absolute; top:7; left:30%; z-index:-1">

<p align="center" id="example">
<a id = a1 href="#" >Javascript DHTML - Move mouse here</a>
.......
.......
<a href="#" id = a7 onclick="window.back();"> BACK - ATGAL </a>
</p>

</BODY>
</HTML>

Code: Javascript. Motion of element.

Properties top and left:, setInterval. Possible to use setTimeout:
<SCRIPT language="JavaScript1.2">

var x = 80;
var y = 80;
var offsetx = 10;
var offsety = 10;
var limit = 50;

function bounceIt() {

var el = document.getElementById("bounce");
x += offsetx;
y += offsety;
if ((x >= 200) ||
(x <= 0 ) ){
offsetx = -offsetx;
}
if ((y>= 200) ||
(y <= 0)) {
offsety = -offsety;
}
el.style.left= x;
el.style.top = y;
}
</SCRIPT>

....
<BODY onload="window.tm = setInterval('bounceIt()', 102);" onunload=clearInterval(window.tm); >

....

Code:
Javascript. Motion of element.
Javascript. bad positions.
Javascript. sin().

Final:
Javascript ART. 
Previous articlePage topNext article  ALL TOPICS



 Use username: Guest, Anonymous, Programmer






QUOTES:
To myself, personally, it brings nothing but increasing drudgery and daily loss of friends.
Thomas Jefferson
There never was a child so lovely but his mother was glad to get him asleep.
Ralph Waldo Emerson
Life shrinks or expands in proportion to one's courage.
Anais Nin