Center Picture from Left to Right

[Total: 0    Average: 0/5]

This shows how to have an image move from left to right as the page loads.

Body Code:

Since this example uses an onload event - it doesn't automatically work with 
this database. Click the link below to have it "start".<BR>
<a href="javascript:centerIt()">Click here to start this example</a><BR>
<script>
//onload="centerIt()";
var isNS = document.layers?true:false;
var isIE = document.all?true:false;
var picWidth=30;
var picHeight=30;
var mD = 5; // delay between movements in milliseconds.
var xMoveDistance = 4;

// This allocates room on the page if you need it to do that
// then just uncomment it.
//document.write('<table height='+picHeight+'width="100%" border=0><tr height="100%">');
//document.write('<td width="100%">&nbsp;</td></tr></table>');
</script>
<div id=c1 style="position:absolute;top:0;left:40">
<script>
var _txt = '<img border=0 width='+picWidth+' height='+picHeight+' src="http://www.js-examples.com/js/pic1.gif">';
document.write(_txt);
</script>
</div>
<script>
var targetY = 0;
var targetX = isNS?((innerWidth - picWidth) / 2):((document.body.clientWidth - picWidth)/2);
var mT = null;
function centerIt() {
  var _tX;
  if (isNS) { document.c1.x += xMoveDistance;           _tX = document.c1.x; }
  if (isIE) { document.all.c1.style.posLeft += xMoveDistance; _tX = document.all.c1.style.posLeft; }
  if (_tX >= targetX) {
    if (mT != null) {
	  clearInterval(mT);
	  mT = null;
	}
  } else {
    if (mT == null) {
	  if (isNS) {
	    document.c1.y = targetY;
	    document.c1.hidden = false;
	  }
	  if (isIE) {
	    document.all.c1.style.posTop= targetY;
	    document.all.c1.style.visibility = "visible";
	  }
	  mT = setInterval('centerIt()',mD);
	}
  }
}



</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *