...

View Full Version : Script to Move Image across the screen



hcrosex3
11-04-2012, 02:51 PM
I have a small script. I am trying to move the image from the left side of the page to right and back and then once it reaches the left it will jump back to the right. For some reason it is not moving. Any Suggestions?


<script type="text/javascript">
function moveleft()
{
var pp=document.getElementById("x");
var lefta=parseInt(pp.style.left);
if(lefta>0)
{
var tt=setTimeout("moveleft()",20);
lefta=lefta-10;
pp.style.left=lefta+"px";
}
}
</script>
<img src="giorgio.gif" id="x" style="position:relative;top:10px;left:125px;"><br>

jmrker
11-04-2012, 04:36 PM
Check the value of lefta, it may not be what you expect it to be.

hcrosex3
11-04-2012, 05:13 PM
Ahh slip of the finger , rookie mistake. :P thank you! But see the image continues to move across the screen extending the length of the browser window. I don't want it to do that I want it to stop at whatever the length of the window is and then go back.


<html>
<head>
<script type="text/javascript">
function moveleft()
{
var pp=document.getElementById("x");
var lefta=parseInt(pp.style.left);
if(lefta>0)
{
var tt=setTimeout("moveleft()",20);
lefta=lefta+10;
pp.style.left=lefta+"px";
}
}
</script>
</head>

<body onload="moveleft()">
<img src="giorgio.gif" id="x" style="position:relative;top:10px;left:125px;"><br>
</body>

</html>

vwphillips
11-04-2012, 05:59 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.div {
position:absolute;overflow:hidden;visibility:hidden;left:0px;top:100px;width:100%;height:150px;
}
.move {
position:absolute;visibility:visible;left:-200px;top:0px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMove(id,ms){
var o=zxcMove['zxc'+id],img=document.getElementById(id);
if (img&&!o){
o=zxcMove['zxc'+id]={
obj:img,
p:img.parentNode,
ud:true,
ms:typeof(ms)=='number'?ms:10000
};
}
if (o){
clearTimeout(o.dly);
animate(o,img.offsetLeft,o.ud?o.p.offsetWidth:-img.width,new Date(),typeof(ms)=='number'?ms:o.ms);
}
}

function animate(o,f,t,srt,mS){
var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.obj.style.left=now+'px';
}
if (ms<mS){
o['dly']=setTimeout(function(){ animate(o,f,t,srt,mS); },10);
}
else {
o.obj.style.left=t+'px';
o.ud=!o.ud;
zxcMove(o.obj.id);
}
}

/*]]>*/
</script>

</head>

<body>

<input type="button" name="" value="Move" onmouseup="zxcMove('tst',5000);"/>
<div class="div" >
<img class="move" id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>
</body>

</html>

yaseenyahya
11-04-2012, 06:34 PM
var geter,lefta;
function moveRight() {
geter = document.getElementById("x");
lefta = parseInt(geter.style.left);
var starter = setTimeout("moveRight()",20);

lefta = lefta+5;
geter.style.left = lefta + "px";

if (lefta === 980) {
clearTimeout(starter);
moveLeft();

};
};
function moveLeft(){

var starter = setTimeout("moveLeft()",20);
lefta = lefta - 5;
geter.style.left = lefta+"px";

if (lefta === 125) {
clearTimeout(starter);

};
}

hcrosex3
11-04-2012, 07:39 PM
var geter,lefta;
function moveRight() {
geter = document.getElementById("x");
lefta = parseInt(geter.style.left);
var starter = setTimeout("moveRight()",20);

lefta = lefta+5;
geter.style.left = lefta + "px";

if (lefta === 980) {
clearTimeout(starter);
moveLeft();

};
};
function moveLeft(){

var starter = setTimeout("moveLeft()",20);
lefta = lefta - 5;
geter.style.left = lefta+"px";

if (lefta === 125) {
clearTimeout(starter);

};
}



Yes! This is exactly what i'm trying to do but now if I was to try and reverse the direction onlick I thought I would put in onclick= moveLeft() but that just makes the image shake in place. Im confused as to why that is.

nomanic
11-04-2012, 09:11 PM
var geter,lefta,dir=1;
function mover(o) {
if (o) {dir=-dir;}
geter = document.getElementById("x");
lefta = parseInt(geter.style.left);
var starter = setTimeout("mover()",20);

lefta = lefta+(5*dir);
geter.style.left = lefta + "px";

if (lefta > 975) {
dir=-1;
};
if (lefta < 130) {
dir=1;
};

};


onclick="mover(1);"
onload="mover();"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum