居中的廣告彈窗

位置計算：（可視區尺寸-廣告自身尺寸） / 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();
    }
};

（後續待補充）

BOM學習實用路線（2）——案例：居中廣告彈窗

居中的廣告彈窗

druid數據源 xml配置

React 0基礎學習路線（6）— 圖解深度詳述React路由及其詳細案例（附詳細案例代碼解析過程）

React 0基礎學習路線（5）— 圖解詳述生命週期原理詳述（附詳細案例代碼解析過程）

BOM學習實用路線（2）——案例：居中廣告彈窗

0基礎學習Python基礎語法（0）-print()與變量

BOM學習實用路線（5）——BOM的hash路由實現原理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結