在窗体尺寸发生变化或滚动情况下永远保持水平/垂直方向居中的广告小窗口
时间: 2023-11-28 08:49:46 浏览: 57
要实现在窗体尺寸变化或滚动时保持广告小窗口水平/垂直方向居中,可以使用CSS的`position`和`transform`属性。
首先,在广告小窗口的CSS中添加以下代码:
```css
.ad-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
这将使广告小窗口相对于浏览器窗口固定在中心位置,并使用`transform`属性来水平和垂直居中。
接下来,使用JavaScript监听窗口`resize`和`scroll`事件,并在每次事件发生时重新计算并设置广告小窗口的位置:
```javascript
const adWindow = document.querySelector('.ad-window');
function centerAdWindow() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const adWidth = adWindow.offsetWidth;
const adHeight = adWindow.offsetHeight;
adWindow.style.top = `${windowHeight / 2 - adHeight / 2}px`;
adWindow.style.left = `${windowWidth / 2 - adWidth / 2}px`;
}
window.addEventListener('resize', centerAdWindow);
window.addEventListener('scroll', centerAdWindow);
// 初始化时执行一次
centerAdWindow();
```
这将在窗口大小或滚动位置发生变化时重新计算广告小窗口的位置,并使用`top`和`left`属性设置新的位置。
请注意,此示例假设广告小窗口具有`.ad-window`类,您应该将其替换为您的实际类名。
阅读全文