Question

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

此处示例：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％高度和宽度，我想要两个不同的面板可以滑入 - 一个用于＃btn-commercial，另一个用于＃btn-residential。

如何实现这一目标的任何想法？

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

Answer 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;添加到滚动条所属的元素（可能是正文，但这取决于您对网站其余部分的结构和样式）

Answer 2

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

http://joelb.me/scrollpath/

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

https://github.com/JoelBesada/scrollpath

希望这有帮助

从右侧滑入面板

2 个答案: