0

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

我想在页面的中心有一个或两个部门，如果需要的话，点击时会分开。顶部向上滑动，底部向下滑动，中间显示网站内容。

点击

滑动

我不完全确定我的搜索词是如何正确执行的。我见过一些有这种变化的网站。只有那些打开左/右的。我确信这很困难，但任何有助于实现这一目标的帮助将不胜感激。

在此先感谢，BC。

4

5 回答 5

2

如果您使用的是 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>
于 2012-05-22T19:19:43.943 回答
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%;
}
于 2012-05-22T19:56:07.983 回答
1

我刚刚解决了这个问题。我不希望 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();
    });

});

​</p>

然后在 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/

希望有帮助！

于 2012-05-22T19:43:17.543 回答
0

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

于 2012-05-22T19:22:16.707 回答
0

jQuery .animate() 函数也可能值得研究——它使用 CSS，这通常是更好的做法。

于 2012-05-22T19:24:12.490 回答