修改滑動javascript div

我從網上獲得了一些代碼，使一個盒子滑入。但它從左上角滑入，我希望它從底部滑入。我改變了CSS的位置從頂部：-200px到底：-200px和改變，從修改滑動javascript div

{ 
    popup.style.top = (currentTop + speed) + "px"; 
    keepMoving = true; 
}

改變位置的代碼部分

{ 
    popup.style.bottom = (currentTop + speed) + "px"; 
    keepMoving = true; 
}

現在這是行不通的。我看不出我應該做什麼變量。以下是完整的代碼（如果我改回「頂」，其作品）

<html> 
<head> 
<title>Moving Pop Up Samplet</title> 


<style> 

#popup 
{ 
height:200px; 
width:200px; 
border:1px solid #000; 
background:#CC9900; 
position:absolute; 
bottom:-200px; 
left:-200px; 
} 

</style> 


<script> 

var timer = null; 
var speed = 3; //1 is slow 
var endTop = 0; 
var endLeft = 0; 

//****************************************************** 
// Simple little function to get Elements as an object 
//****************************************************** 
function getEl(id) 
{ 
var el = document.getElementById(id); 
return el; 
} 
//****************************************************** 
// Function to show Elements 
//****************************************************** 
function showEl(id) 
{ 
getEl(id).style.display =""; 
} 
    //****************************************************** 
    // Function to hide Elements 
    //****************************************************** 
    function hideEl(id) 
{ 
getEl(id).style.display ="none"; 
    } 

    //****************************************************** 
    // Function to move Element 
    //****************************************************** 
    function moveEl(id) 
    { 
var popup = getEl(id); 
var currentTop = parseInt(popup.offsetTop); 
var currentLeft = parseInt(popup.offsetLeft); 

var keepMoving = false; 
//Move 
if (currentTop <= endTop) 
{ 
    popup.style.bottom = (currentTop + speed) + "px"; 
    keepMoving = true; 
} 
if(currentLeft <= endLeft) 
{ 
    popup.style.left = (currentLeft + speed) + "px"; 
    keepMoving = true; 
} 
if (keepMoving) 
{ 
    startMove(id); 
} 
else 
{ 
    endMove(); 
} 
    } 
    //****************************************************** 
    // Function to start the move 
     //****************************************************** 
    function startMove(id) 
    { 
timer = setTimeout("moveEl('"+id+"')", 1); 
    } 
    //****************************************************** 
    // Function to end the move 
//****************************************************** 
    function endMove() 
{ 
clearTimeout(timer); 
} 

</script> 

</head> 
<body onload="startMove('popup');"> 
<!-- POP UP DIV --> 
<div id="popup"> 
<center><span onclick="hideEl('popup');" style="cursor:pointer;"> Close</span></center> 
</div> 
<!--END POP UP DIV --> 

<center><span onclick="startMove('popup');" style="cursor:pointer;"> Show Pop Up</span></center> 


</body> 
</html>

來源

2012-08-23 rich leppard

我希望事情變得如此簡單...... – Pevara

我想到了這種情況，我懷疑爲什麼我不能這麼做的答案會一樣長。哼。 –

你只需要重新調整你的不平等。

鑑於在javascript中沒有偏移底部屬性，即使您想從底部進入，仍然可以使用頂級值更容易。

function moveEl(id) { 
    var popup = getEl(id); 

    var currentTop = parseInt(popup.offsetTop); 
    var currentLeft = parseInt(popup.offsetLeft); 

    var keepMoving = false; 
    //Move 
    if (currentTop >= endTop) { 
     popup.style.top = (currentTop - speed) + "px"; 
     keepMoving = true; 
    } 
    if (currentLeft <= endLeft) { 
     popup.style.left = (currentLeft + speed) + "px"; 
     keepMoving = true; 
    } 
    if (keepMoving) { 
     startMove(id); 
    } 
    else { 
     endMove(); 
    } 
}

這裏是一個工作jsFiddle。

如果您考慮函數檢查方法是否已完成，並且每次都添加speed變量，那麼您應該能夠逐步瀏覽原始版本，並且看看邏輯如何工作。

來源

2012-08-23 15:56:46 RYFN

我想我和你在一起，但現在它不停止移動，直到它達到頂峯！感謝你的回答。 –

如果你看看jsFiddle，你會注意到我已經將'endTop'變量更新爲50.這是它從頁面頂部停止的像素數量 - 如果更新它（嘗試播放jsFiddle）你應該能夠讓它停下來，無論你需要:) – RYFN

而是從頭開始編寫一些考慮使用jQuery的slideToggle方法。

來源

2012-08-23 15:23:37 akluth

修改滑動javascript div

回答

相關問題