Question

我不确定如何在搜索引擎术语中说出我正在寻找的内容，所以我要做的是：

我希望在页面的中心单独分隔时有一个或两个，如果需要的话。顶部向上滑动，底部向下滑动，它显示中间的网站内容。

click

slide

我不确定我是如何搜索能够正确执行此操作的内容。我见过一些网站有不同的变化。只有那些左/右打开。我确信这很难，但是对于实现这一点的任何帮助都将非常感激。

提前致谢，Bc。

Answer 1

如果您使用的是JQuery，则可以在目标div上使用slideUp和slideDown。

修改

实际上，在这种情况下，我认为 slideToggle 正是您所寻找的：

<script type='text/javascript'> $(document).ready(function() { $(".button").click(function() { $("#content).slideToggle(); }); }); </script> <div class='button'>Top Panel</div> <div id='content'>Content</div> <div>Bottom Panel</div>

Answer 2

我认为这就是您所需要的：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%;
}

Answer 3

我刚刚解决了这个问题。我不希望div翻过它下面的材料但是把它移下来。这将使得分裂分成两半，你觉得你想要的东西 - 你需要在滑动div下面的东西（比如另一个div，或者在它上面有一些不可见高度的div和CSS中的Auto高度，使它适用于你的主要包装

这是我做的：

我的CSS：

.slide {
    height:200px;
    background-color: white;
    padding:20px;
    margin-top:10px;
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

}




#show_div {
    margin-left: 40px;
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border: 1px solid #333;
    font-size: 20px;


}

这是为了让它看起来很漂亮。以下是更多功能：

.show_hide {
    display:none;

编码：在标题中我放了JQ函数：

 $(document).ready(function(){

        $(".slide").hide();
        $(".show").show();

    $('.show').click(function(){
    $(".slide").slideToggle();
    });

});

然后在div本身不要忘记将实际的好东西放在你的div上以你喜欢的方式运行：

<a id="show_div" href="#" class="show">Browse Styles</a>


    <div class="slide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, nibh at iaculis ultrices, mi eros tincidunt enim, vitae vehicula lectus odio a ipsum. Aliquam erat volutpat. Fusce id nisl sit amet diam iaculis pulvinar. Sed ultrices ullamcorper ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mi arcu, porta ut elementum et, ullamcorper sed eros. In euismod tellus sed ipsum adipiscing suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac magna dui. Aenean nec leo libero. Pellentesque lacinia dolor a dui lacinia consectetur. Mauris euismod porta magna, non dignissim orci adipiscing malesuada. Phasellus nunc sapien, consectetur nec vestibulum ac, euismod a ipsum.

    </div>

对此的主要背景是，您需要为要使用它的每个div放置一个Jscript实例，否则它们将同时激活。您可以将按钮（或链接）放在页面的任何位置。我有几个并排，当点击时，他们将页面从同一位置拆分。

如果您需要其中的多个，请不要忘记给div添加唯一ID并在Jscript中更改其名称以使魔法发生。

这里是一个JFIDDLE示例：http://jsfiddle.net/vH3cK/1/

希望有所帮助！

Answer 4

第一个“div”应该由两个不同的div组成，一个用于顶部，另一个用于底部。您的页面内容应首先设置为“display：none”。当用户单击第一个div时，使用“$（selector）.slideDown（500）”显示页面内容。必须测试它，但我认为它应该像一个魅力。您可以尝试使用.show（）,. togog（）和不同的时间（以毫秒为单位）来查看最适合的内容。

Answer 5

jQuery .animate（）函数也可能需要考虑 - 它使用CSS，这通常是更好的做法。

在点击时显示Divs内容

5 个答案: