how to move/slide an image from left to right

Question

I want to slide or move a image from left to right something like in

http://rajeevkumarsingh.wix.com/pramtechnology

The read pentagonal box that moves Ok !

I tried a bit but failed to do so i used the codes as below

<script type="text/javascript">

<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'absolute'; 
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';
   moveRight();
} 
function moveRight(){
if (parseInt(imgObj.style.left)<=10)
{
   imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
   imgObj.style.visibility='visible';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
   //stopanimate = setTimeout(moveRight,20);
  }
else
  stop();
  f();
}

function stop(){
   clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="xyz.gif" style="margin-left:170px;" />

There some kind of resolution problem with Firefox and IE as well. How to solve them. Also i am not able to move the things so clearly. Is this possible or not? I want it to be with javascript and not flash.

Answer 1

var animate, left=0, imgObj=null;

function init(){

   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'absolute';
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';

   moveRight();
}

function moveRight(){
    left = parseInt(imgObj.style.left, 10);

    if (10 >= left) {
        imgObj.style.left = (left + 5) + 'px';
        imgObj.style.visibility='visible';

        animate = setTimeout(function(){moveRight();},20); // call moveRight in 20msec

        //stopanimate = setTimeout(moveRight,20);
    } else {
        stop();
    }
    //f();
}

function stop(){
   clearTimeout(animate);
}

window.onload = function() {init();};

Answer 2

Here is an example of moving an image to the right as well as fading in from a .js file instead of your index page directly:

----------My index.html page----------

<!DOCTYPE html>
<html>
<body>

<script src="myJava.js"></script>

<script language="javascript" type="text/javascript">
    //In pixels
    var amountToMoveTotal = 1000;
    var amountToMovePerStep = 10;
    //In milliseconds
    var timeToWaitBeforeNextIncrement = 20;

    var amountToFadeTotal = 1.0;
    var amountToFadePerStep = 0.01;
</script>

<p>This one moves right on hover</p>
<img onmouseover="moveRight(this, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement)" src="http://www.w3schools.com/jsref/smiley.gif" style="left:0px;top:50px;position:absolute;opacity:1.0;">
<br><br>
<p>This one fades in on hover</p>
<img onmouseover="fadeIn(this, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement)" src="http://www.w3schools.com/jsref/smiley.gif" style="left:0px;top:150px;position:absolute;opacity:0.1;">

</body>
</html>

----------My myJava.js code----------

var animate;
var original = null;

function moveRight(imgObj, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement)
{
    //Copy original image location
    if (original === null){
        original = parseInt(imgObj.style.left);
    }

    //Check if the image has moved the distance requested
    //If the image has not moved requested distance continue moving.
    if (parseInt(imgObj.style.left) < amountToMoveTotal) {
        imgObj.style.left = (parseInt(imgObj.style.left) + amountToMovePerStep) + 'px';

        animate = setTimeout(function(){moveRight(imgObj, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement);},timeToWaitBeforeNextIncrement);
    }else {
        imgObj.style.left = original;
        original = null;        
        clearTimeout(animate);
    }
}
function fadeIn(imgObj, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement)
{
    //Copy original opacity
    if (original === null){
        original = parseFloat(imgObj.style.opacity);
    }

    //Check if the image has faded the amount requested
    //If the image has not faded requested amount continue fading.
    if (parseFloat(imgObj.style.opacity) < amountToFadeTotal) {
        imgObj.style.opacity = (parseFloat(imgObj.style.opacity) + amountToFadePerStep);

        animate = setTimeout(function(){fadeIn(imgObj, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement);},timeToWaitBeforeNextIncrement);
    }else {
        imgObj.style.opacity = original;
        original = null;
        clearTimeout(animate);
    }
}

Answer 3

Use the jQuery library, is really easy to do what you need

http://api.jquery.com/animate/

Follow sample code of page : http://api.jquery.com/stop/

<!DOCTYPE html>
<html>
<head>
  <style>div { 
position: absolute; 
background-color: #abc;
left: 0px;
top:30px;
width: 60px; 
height: 60px;
margin: 5px; 
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">Go</button> 
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});

/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});

/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});

</script>

</body>
</html>

how to move/slide an image from left to right

Question

3 answers

solution1
6 ACCPTED 2012-07-12 21:36:10

solution2
3 2014-03-28 08:01:23

solution3
1 2012-07-12 21:12:24

how to move/slide an image from left to right

Question

3 answers

solution1 6 ACCPTED 2012-07-12 21:36:10

solution2 3 2014-03-28 08:01:23

solution3 1 2012-07-12 21:12:24

solution1
6 ACCPTED 2012-07-12 21:36:10

solution2
3 2014-03-28 08:01:23

solution3
1 2012-07-12 21:12:24