wie bewegen/schieben Sie ein Bild von Links nach rechts

Ich soll schieben oder bewegen Sie ein Bild von Links nach rechts so etwas wie in

http://rajeevkumarsingh.wix.com/pramtechnology

Lesen fünfeckigen Feld, bewegt sich Ok !

Versuchte ich ein wenig aber nicht zu tun
ich benutzt die codes wie unten

<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;" />

Gibt es irgendeine Art der Auflösung ein problem mit Firefox und IE ebenso. Wie Sie zu lösen. Auch ich bin nicht in der Lage zu bewegen, die Dinge so klar. Ist das möglich oder nicht? Ich will, dass es mit javascript und nicht flash.

InformationsquelleAutor Rajeev Kumar | 2012-07-12

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();};

jsfiddle.net/EEQgk/10 für ein jsfiddle Beispiel
Sie haben nur kopiert einfügen mein code, sonst nichts.......
Ich reparierte Sie - beachten Sie das kleine änderungen. 1) entfernt, der Aufruf von f (), die nicht definiert ist, 2) angemessene { } um Ihre else-Bedingung, 3) aktualisiert parseInt() zu tun, wenn in moveRight und 4) legen Sie die Globale position, so Sie nicht Sie neu zu definieren wiederholt, 5) wickelte Ihre moveRight setTimeout innerhalb einer Funktion aufrufen, und 6) das Bild (in html) werden innerhalb eines relativ positionierten container. (Auch mein jsFiddle funktioniert und deines nicht, also, wenn Sie ein problem damit haben, lass es mich wissen und ich werde versuchen zu helfen, aber der gepostete code funktioniert wie Sie gefragt haben.)

InformationsquelleAutor MyStream

Hier ist ein Beispiel der Bewegung eines Bild auf der rechten Seite sowie das einblenden von einem .js-Datei anstelle Ihrer index-Seite direkt:

----------Meine index.html Seite----------

<!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>

----------Meine 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);
    }
}

InformationsquelleAutor CodeMonkey

Verwenden Sie die jQuery-Bibliothek ein, ist wirklich einfach zu tun, was Sie brauchen

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

Folgen, Beispiel-code von der Seite : 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>

Ja ist es - aber es hilft nicht, ihn zu lernen. Können wir ein jsFiddle des Codes?
Hinzugefügt ein Beispiel-code von jQuery
und weitere demos auf @flem Antwort

InformationsquelleAutor GTSouza

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.