我想创建一个全屏图像,让我可以向下滚动页面,就像这里的苹果网站一样。
您会注意到,通过调整浏览器的大小,图像保持全屏显示,但它允许您向下滚动到页脚。
这可以在 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;
}
这是一把 fiddle http://jsfiddle.net/XXHgJ/
如果您向下滚动页脚显示但菜单保持不动,则需要向上滚动。
最佳答案
如果你只想做一个全屏元素,你可以用 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;
}
关于javascript - 显示全屏图像 100% 高度和 100% 宽度但能够向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19498316/