Full version: jsB@nk » Text » Animation » Dynamic Movement
URL: https://www.javascriptbank.com/dynamic-movement.html
Dynamic Movement brings you some very cool DHTML functionality in both Netscape 4.0+ and MSIE 4.0+. You can basically move any object that is positioned absolutely from any point to another.In this demo, we move a DIV object from point (-100,-100) (in other words, off the screen and therefore invisible) to (180,280).
Full version: jsB@nk » Text » Animation » Dynamic Movement
URL: https://www.javascriptbank.com/dynamic-movement.html
<SCRIPT language=JavaScript type=text/javascript>IE4 = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4; NS4 = navigator.appName.substring(0,8) == "Netscape" && parseInt(navigator.appVersion) >= 4; // checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ...function checkBrowser(){ if(IE4 || NS4){ return true; } return false;}// movableObj() -- Creates a new movable objectfunction movableObj(startX, startY, endX, endY, delay, speed, refId){ this.sX = startX; this.sY = startY; this.eX = endX; this.eY = endY; this.de = delay; this.sp = speed; this.ref = refId; xL = endX - startX; yL = endY - startY; with (Math){ if(abs(xL) > abs(yL)){ this.xS = (xL > 0)?1:-1; this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL); this.howManySteps = abs(xL / speed); } else if(abs(yL) > abs(xL)){ this.yS = (yL > 0)?1:-1; this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL); this.howManySteps = abs(yL / speed); } else { this.yS = (yL > 0)?1:-1; this.xS = (xL > 0)?1:-1; this.howManySteps = abs(xL / speed); } } this.startMovement = startMovement;}// startMovement() -- starts the movementfunction startMovement(){ if(checkBrowser()){ if(IE4){ ref = document.all(this.ref).style; } else { ref = document[this.ref]; } doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps); }}// doDynamicMovement() -- does the Dynamic Movementfunction doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){ if(Math.floor(hS - 1) != 0){ hS--; curX += xS * speed; curY += yS * speed; ref.left = Math.round(curX); ref.top = Math.round(curY); setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp); } else { setPos(eX, eY, ref); }}// setPos() -- sets the end position accurately when doDynamicMovement has done its jobfunction setPos(x, y, ref){ ref.left = x; ref.top = y;}// --></SCRIPT><SCRIPT language=JavaScript type=text/javascript><!--// Here we define the movable objectdynaText = new movableObj(-100,-100,180,280,10,10,"wow");// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM><INPUT onclick=dynaText.startMovement() type=button value="Do the movement!"> </FORM><DIV id=wow style="FONT-SIZE: 20pt; LEFT: -100px; WIDTH: 300px; COLOR: #ff0000; FONT-FAMILY: Verdana, Arial, Helvetica; POSITION: absolute; TOP: -100px">This is a dynamic object in motion.</DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->