BOM学习实用路线（2）——案例：居中广告弹窗

其他 2020-04-24 23:01:24 阅读次数: 0

居中的广告弹窗

位置计算：（可视区尺寸-广告自身尺寸） / 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();
    }
};

在这里插入图片描述




（后续待补充）

溜_x_i_a_o_迪
发布了34 篇原创文章 · 获赞 12 · 访问量 2518
私信 关注

猜你喜欢

转载自blog.csdn.net/u013946061/article/details/105443854
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022