javascript - 单击时显示 Div 内容

Question

我不太确定如何用搜索引擎术语来表达我正在寻找的内容，所以我想做的是:

我希望在页面中央有一个或两个分区，当单击时分开。顶部向上滑动，底部向下滑动，显示中间的网站内容。

---

---

---

我不确定我搜索的词如何正确地做到这一点。我见过一些有这种变化的网站。只有那些向左/向右打开的。我敢肯定这很困难，但是对于实现这一目标的任何帮助将不胜感激。

提前致谢，Bc。

Answer 1

我认为这就是您所需要的:http://jsfiddle.net/WQCav/

HTML:

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS:

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS:

html,body
{
    width:100%;
    height:100%;
}