Question

我从网上拿了一些代码，让盒子滑入。但是它从左上角滑入，我希望它从底部滑入。我将css位置从顶部更改为：-200px到底部：-200px并更改了改变位置的代码部分

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

到

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

现在它不起作用。我看不出我应该做什么变量。这是完整的代码（如果我将它们更改回＆＃39; top＆＃39;）

<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中没有偏移底部属性，即使你想从底部进入，它仍然可以更容易地使用最高值。

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 个答案: