1

我想将一页滑到另一页的顶部。当页面滑动时，背景中的另一个页面会淡出。就像在这个网站上一样。当您单击 McKinsey 概览按钮时，该可见的 html 条将添加到幻灯片页面，并且后台页面被禁用。此外，它看起来像是预先加载了幻灯片的页面。

我尝试了几个页面滑块 jquery 插件，但与上面提到的链接不同。不要在后台禁用页面。此外，当他们隐藏时，他们隐藏了整个页面。但我希望它的一些可见部分可供用户使用。请指导我。

4

1 回答 1

1

“homeSlider”类可在网站上查看（搜索 MC.homeSlider）它动画不透明度和边距右。

恕我直言，它更容易在“#slider”和“#slider.open”之间切换类，并为动画使用 css 过渡。

完成此操作的代码如下所示：

// jQuery

$("#sliderBtn").click(function(){
    $("#slider").toggleClass("open");
});

// CSS

#slider {position:absolute;opacity:0;margin-left:300px;transition: opacity 2s, margin-left 1s;}
#slider.open {opacity:1;margin-left:100px}

当然，缺点是旧的浏览器看不到动画。它通过适当地显示打开和关闭状态来正确降级。

jsbin：http ://codepen.io/anon/pen/rhudB

于 2013-04-28T06:50:12.780 回答