0

我试图在投资组合部分复制此网站上的效果，它会在视口的全尺寸中滑动面板，然后在单击关闭时将其滑出。

此处示例：http: //alwayscreative.net/#portfolio

这是我当前的标记：

<section class="panel" id="portfolio">
    <section class="content">
        <h1>What are you <strong>interested</strong> in?</h1>
        <a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a>
        <a class="btn-portfolio" id="btn-residential" href="#">Residential</a>
    </section>
</section>

.panel 部分是视口的 100% 高度和宽度，我想要 2 个不同的面板能够滑入 - 一个用于#btn-commercial，一个用于#btn-residential。

任何想法如何做到这一点？

如果有帮助，这是我的网站到目前为止：http ://www.freshbrand.ca/testlink/top40/#portfolio

4

2 回答 2

1

以下是使用 JQuery 执行此操作的方法，但如果您愿意，显然您可以使用普通 javascript 执行此操作。在您的 css 中设置绝对位置的面板：

.panel {
  position: absolute;
  top: 0;
  height: 100%;
  border-width: 0;
  margin: 0;
}
.panel inactive{
  display: none;
}
.panel active {
  display: block;
  left: 0;
  width: 100%;
  height: 100%;
}

在您的 javascript 中（在 dom 加载后）获取屏幕尺寸并将非活动元素的位置设置为刚好离开屏幕的右侧边缘：

$('.panel').css('width', screen.innerWidth);

var setup = function() {
  $('.portfolio-panel.inactive').css('left', window.innerWidth);
  $('.portfolio-panel.active').css('left', 0);
}
setup();

当您希望从右侧滑入面板时，请将其 id 传递给以下函数：

var slideIn = function(panelId) {
  $('#' + panelId).animate({
    left: 0
  }, 400, function () { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen)
    // tidy up
    $('.portfolio-panel.active').removeClass('active').addClass('inactive');
    $('#'+panelId).removeClass('inactive').addClass('active');
    setup();
  });
};

编辑：事件处理程序看起来像这样：

$('.btn-portfolio').click(function() {
  slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn
});

剩下的唯一问题是消除您在动画期间可能会看到的水平滚动条。只需添加overflow-x: hidden;到滚动条所属的元素（可能是正文，但这取决于您对网站其余部分的结构和样式）

于 2013-05-17T20:02:41.667 回答
-1

这基本上是一个单页网站，有很多 jQuery 插件可供使用。我个人更喜欢

http://joelb.me/scrollpath/

查看它的演示并从 github 的链接下载代码

https://github.com/JoelBesada/scrollpath

希望这可以帮助

于 2013-05-17T18:13:23.373 回答