如何移動/從左邊的圖像滑動到右側

http://rajeevkumarsingh.wix.com/pramtechnology

的閱讀五角形框移動好！

我嘗試了一下，但沒能如願我使用的代碼如下

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

有某種與Firefox和IE解析問題爲好。如何解決它們。此外，我無法如此清晰地移動事物。這是否可能？我希望它與JavaScript和不閃光。

來源

2012-07-12 Rajeev Kumar

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

來源

2012-07-12 21:36:10 MyStream

http://jsfiddle.net/EEQgk/10/爲jsfiddle示例 – MyStream 2012-07-12 21:37:44

您剛纔複製粘貼我的代碼，沒有別的....... – 2012-07-13 02:13:35

我修正了它 - 注意一些小的變化。 1）刪除了未定義的f（）調用，2）將正確的{}放在其他條件中，3）更新了parseInt（），在moveRight中完成一次，4）全局設置位置， 5）將你的moveRight setTimeout包裝在函數調用中，6）將圖像（html）設置在相對定位的容器內。（另外，我的jsFiddle的工作原理與你沒有的，所以如果你看到任何問題，請告訴我，我會盡力幫忙，但發佈的代碼按你的要求工作。） – MyStream 2012-07-13 12:49:10

使用jQuery庫，是很容易的事，你需要頁面

按照示例代碼：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>

來源

2012-07-12 21:12:24 GTSouza

是的，但它並沒有幫助他學習。我們可以得到你的代碼的jsFiddle嗎？ – MyStream 2012-07-12 21:13:09

添加了來自jQuery – GTSouza 2012-07-12 21:15:55

的示例代碼和更多演示@flem回答 – GTSouza 2012-07-12 21:16:42

這裏是移動的示例圖像向右，以及從.js文件而不是您的索引頁直接淡入：

----------我的index.html頁面----------

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

----------我myJava.js代碼----------

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

來源

2014-03-28 08:01:23 CodeMonkey

如何移動/從左邊的圖像滑動到右側

回答

相關問題