修改滑動javascript div

Question

我從網上得到了一些代碼，可以使盒子滑入。但是它從左上方滑入，我希望它從底部滑入。 我將css位置從top：-200px更改為bottom：-200px，並更改了代碼位置的一部分

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

至

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

現在不起作用。 我看不到應該做什么變量。 這是完整的代碼（如果我將它們改回“ top”，則可以使用）

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

Answer 1

取而代之的是考慮使用jQuery的slideToggle方法。

Answer 2

您只需要稍微調整一下不等式即可。

鑒於javascript中沒有偏移量bottom屬性，即使您想從底部進入，也仍然可以更輕松地使用top值。

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變量的方式，那么與之相比，您應該能夠逐步瀏覽原始版本，並查看其邏輯如何工作。

修改滑動javascript div

問題描述

2 個解決方案

解決方案1
0 2012-08-23 15:23:37

解決方案2
0 已采納 2012-08-23 15:56:46

修改滑動javascript div

問題描述

2 個解決方案

解決方案1 0 2012-08-23 15:23:37

解決方案2 0 已采納 2012-08-23 15:56:46

解決方案1
0 2012-08-23 15:23:37

解決方案2
0 已采納 2012-08-23 15:56:46