0

我从网上得到了一些代码来制作一个盒子滑入。但是它从左上角滑入，我希望它从底部滑入。我将 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>
4

2 回答 2

0

而不是从头开始写一些东西考虑使用jQuery的slideToggle方法。

于 2012-08-23T15:23:37.167 回答
0

你只需要稍微调整一下你的不平等。

鉴于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-23T15:56:46.550 回答