0

我的身体高度为 1000 像素，屏幕高度为 100 像素。我想显示一个<div>占据整个<body>宽度和<body>高度的。那<div>就是有一个background-image，我想让它显示在视口的中间。如何使用 Javascript 实现这一点。

我使用了以下概念，但它不适用于移动设备

  ele.style.backgroundPosition = document.body.scrollTop + 
                                 (window.innerHeight / 2) - heightOfImage;
4

1 回答 1

0

最简单的解决方案可能是在<div />其上设置背景图像的固定位置，并且它的 z-index 设置使其显示在页面上的所有其他元素下方。

示例：http: //jsfiddle.net/gztRa/

如果你真的想走 JavaScript 路线（如果我能在这里提供帮助，我个人不会这样做），你将不得不按照以下方式做一些事情：

  1. 连接到正在滚动的元素的滚动事件
  2. 每次触发时，调整滚动位置，如下所示：

var verticalPosition = document.body.scrollTop + (window.innerHeight / 2) - heightOfImage;

ele.style.backgroundPosition = 'center ' + verticalPosition + 'px';

注意添加，'px'因为这很重要。“中心”之后还有一个空格，所以你应该得到如下所示的内容：ele.style.backgroundPosition = 'center 50px'.

示例（使用 Zepto 或 jQuery）：http: //jsfiddle.net/7aqgG/7/

于 2012-12-10T11:59:55.460 回答