2

我想创建一个全屏图像，让我像在苹果网站上一样向下滚动页面。

http://www.apple.com/uk

您会注意到，通过调整浏览器的大小，图像会保持全屏显示，但它允许您向下滚动到页脚。

这可以在 jquery 中完成还是需要 javascript？

到目前为止，我唯一的代码是使图像全屏显示的 css 代码：

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

这是一个小提琴http://jsfiddle.net/XXHgJ/

如果您向下滚动页脚显示但菜单保持不动，则需要向上滚动。

4

3 回答 3

1

如果你只想制作一个全屏元素，你可以用 jQuery 来做：

jQuery：

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

现场演示：http: //jsfiddle.net/XXHgJ/7/

于 2013-10-21T15:16:53.560 回答
0

是这样的吗？...我用纯css做了这件事，我仔细注意到在苹果的页面调整大小时，图像大小不一定会改变。

<div>

    <div style="position:relative; background:green; ">
     <div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
        <div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>

    <div style="background:#fff; padding:30px;">Footer</div>


</div>

请参阅 Feddle：http: //jsfiddle.net/HZbAt/

希望能帮助到你

于 2013-10-21T15:56:10.707 回答
0

在我的页面上我有margin-top 80px 将内容向下推是他们可以添加到代码中的任何内容，所以这不会像-80px 那样发生吗？这是 jquery 脚本

于 2016-02-24T19:31:58.337 回答