居中的广告弹窗
位置计算:(可视区尺寸-广告自身尺寸) / 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.inner {
height: 200px;
border: 2px solid #000;
}
#banner {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: #000;
font: 20px/50px "宋体";
color:#fff;
}
</style>
<script>
window.onload = function(){
let banner = document.querySelector("#banner");
let resizeBanner = ()=>{
let l = (window.innerWidth - banner.offsetWidth) / 2; // (可视区尺寸-广告自身尺寸) / 2
let t = (window.innerHeight - banner.offsetHeight) / 2;
banner.style.left = l + "px";
banner.style.top = t + "px";
};
resizeBanner();
}
</script>
</head>
<body>
<!-- 让滚动条显示出来 -->
<div id="banner">广告弹窗</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
</body>
</html>
可以看出一开始广告窗口确实居中了,但是随着窗口大小改变,广告窗口就不居中了!!!
我们怎么实现改变窗口后,广告窗口依旧居中呢?
小迪在这里犯错了,因为忘记考虑改变窗体时,并且没有重新刷新位置进行居中,因此始终使用的是最开始的值。
window resize(事件): 监听窗口大小发生改变
window.onload = function(){
let banner = document.querySelector("#banner");
let resizeBanner = ()=>{
let l = (window.innerWidth - banner.offsetWidth) / 2; // (可视区尺寸-广告自身尺寸) / 2
let t = (window.innerHeight - banner.offsetHeight) / 2;
banner.style.left = l + "px";
banner.style.top = t + "px";
};
resizeBanner();
window.onresize = ()=>{
resizeBanner();
};
}
但是滚动条滚动后,就无法再居中了,那么如何实现呢?
onscroll 监控滚动条位置发生变化
window.scrollY 获取纵向滚动条位置
window.scrollX 获取横向滚动条位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.inner {
width: 2000px;
height: 200px;
border: 2px solid #000;
}
#banner {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: #000;
font: 20px/50px "宋体";
color:#fff;
}
</style>
</head>
<body>
<!-- <div id="banner">广告弹窗</div> -->
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
</body>
</html>
<script>
window.onscroll = function(){
console.log(window.scrollY, window.scrollx);
}
</script>
注意:document.body.scrollLeft, document.body.scrollTop在IE兼容,chrome不兼容。
document.body.scrollLeft, document.body.scrollTop在IE不兼容,chrome兼容
它俩刚好呼应,我们可以写出兼容性好的代码。
document.documentElement.scrollTop||document.body.scrollTop; // 第一个获取方式为0就走第二个获取方式(兼容性好)
setTimeout(() => {
document.documentElement.scrollTop = document.scrollTop = 0;
}, 3000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.inner {
height: 200px;
border: 2px solid #000;
}
#banner {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: #000;
font: 20px/50px "宋体";
color:#fff;
}
</style>
<script>
window.onload = function(){
let banner = document.querySelector("#banner");
let resizeBanner = ()=>{
let l = (window.innerWidth - banner.offsetWidth) / 2;
let t = (window.innerHeight - banner.offsetHeight) / 2;
let scrollL = document.body.scrollLeft || document.documentElement.scrollLeft;
let scrollT = document.body.scrollTop || document.documentElement.scrollTop;
banner.style.left = l + scrollL + 'px';
banner.style.top = t + scrollT + 'px';
}
resizeBanner();
// window resize:监听窗口大小发生改变
window.onresize = function(){
resizeBanner();
};
window.onscroll = ()=>{
resizeBanner();
};
};
</script>
</head>
<body>
<div id="banner">广告弹窗</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
<div class="inner">页面内容</div>
</body>
</html>
小迪发现居中的广告窗口有些跳,这跟浏览器性能有关,即与onresize和onscroll的触发时间和触发间隔有关。
如何解决:小迪认为可以加动画,来改善用户体验感
关于动画,可以参考小迪总结的动画章节。
window.onload = function(){
let banner = document.querySelector("#banner");
let resizeBanner = ()=>{
let l = (window.innerWidth - banner.offsetWidth) / 2;
let t = (window.innerHeight - banner.offsetHeight) / 2;
let scrollL = document.body.scrollLeft || document.documentElement.scrollLeft;
let scrollT = document.body.scrollTop || document.documentElement.scrollTop;
banner.style.left = l + scrollL + 'px';
banner.style.top = t + scrollT + 'px';
}
resizeBanner();
// window resize: 监听窗口大小发生改变
window.onresize = function(){
banner.style.transition = "1s"; // 设置动画
resizeBanner();
};
window.onscroll = function(){
banner.style.transition = "1s"; // 设置动画
resizeBanner();
}
};
(后续待补充)