如何使div增长以覆盖javascript中的段落并进行转换?

时间:2018-01-23 03:24:57

标签: javascript dom

我正在尝试使用应该增长和重叠文本的div进行转换。 这是我的代码

  const box = document.querySelector("#box");
  const mybutt = document.querySelector("#mybutt");

  mybutt.addEventListener("click", transitionfunction);

 function transitionfunction() {
  if(box.style.height != "100px"){
    box.style.height = "100px";
    box.style.transition = "2s";
    }
  else {
   box.style.height = "50px";
   box.style.transition = "2s";
    }
  }
#box {
  background: red;
  height: 50px;
  width: 50px;
 }

 #para {
  postion: fixed;
 }
  <div id="parentdiv">
   <div id="box"></div>
   <p id="para">Help</p>
 </div>
 <button id="mybutt">click</button>

目前,点击按钮,按钮和段落para都向下移动,我希望它们被修复,我希望div #box覆盖{para 1}}但它不起作用。我试过把它固定但不起作用。再次点击按钮,它应该再次显示文本。

3 个答案:

答案 0 :(得分:1)

首先,你拼写了#34;位置&#34;错误#para。将其更改为:

#para {
  position: absolute;
  top: 10%;
}

这会使段落位于一个位置;它不会移动。

答案 1 :(得分:1)

如果您使用position: fixed;,则应手动设置top属性。

要使div覆盖一些文字,请使用z-index

&#13;
&#13;
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");

mybutt.addEventListener("click", transitionfunction);

function transitionfunction() {
    if (box.style.height != "100px"){
        box.style.height = "100px";
        box.style.transition = "2s";
    } else {
       box.style.height = "50px";
       box.style.transition = "2s";
    }
}
&#13;
#mybutt {
    position: fixed;
    top: 120px;
}

#box {
    background: red;
    position: fixed;
    height: 50px;
    width: 50px;
    z-index: 2;
}

#para {
    position: fixed;
    z-index: 1;
    top: 60px;
}
&#13;
<div id="parentdiv">
   <div id="box"></div>
   <p id="para">Help</p>
</div>
<button id="mybutt">click</button>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

固定可行,但您可能希望使用绝对值&#39;相反,如果你想让它锚定到它的父级而不是窗口本身。

此外,&#39;位置&#39;拼写错误;不确定它是否在您的测试代码中。

&#39; top&#39;必须为元素设置属性才能知道 where 锚定自身,&#39; position&#39;属性是要锚定的

HTML

<div id="parentdiv">
    <div id="box"></div>
    <p id="para">Help</p>
    </div>
</div>
<button id="mybutt">click</button>

CSS

<style>
  #box {
    background: red;
    height: 50px;
    width: 50px;
  }

  #para {
    position: absolute;
    top:70;
  }
 </style>

*您也可能想要移动#para;#para;在&#39;#parentdiv&#39;,但这取决于你最终会做什么,它也在内部工作。

<强>加了:

要包含75px的警报,您必须使用一个能够为您提供更精细控制的功能(据我所知)。这是一个解决方案:

 <script>
   const box = document.querySelector("#box");
   const mybutt = document.querySelector("#mybutt");

   mybutt.addEventListener("click", transitionfunction);



  var intHeight = $("#box").css("height").split("p")[0];

  function transitionfunction() {
   if(intHeight < 100) {
        intHeight++;
        $("#box").css("height", intHeight + "px");
        if (intHeight===76)
            alert("75px!")
        requestAnimationFrame(transitionfunction);
     }
     intHeight = $("#box").css("height").split("p")[0];
     mybutt.addEventListener("click", revtransitionfunction);
     mybutt.removeEventListener("click", transitionfunction);

  }

  function revtransitionfunction() {
    if(intHeight >= 50) {
        intHeight--;
        $("#box").css("height", intHeight + "px");
        if (intHeight===74)
            alert("75px!")
        requestAnimationFrame(revtransitionfunction);
    }
    intHeight = $("#box").css("height").split("p")[0];
    mybutt.addEventListener("click", transitionfunction);
    mybutt.removeEventListener("click", revtransitionfunction);


  }