0

ボックスをスライドインさせるコードをネットから入手しました。ただし、左上からスライドインしたので、下からスライドインしたかったのです。css の位置を top:-200px から bottom:-200px に変更し、位置を変更するコードの部分を

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

2 に答える 2

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 に答える
0

ゼロから何かを作成する代わりに、jQuery のslideToggleメソッドの使用を検討してください。

于 2012-08-23T15:23:37.167 に答える