js學習之——網頁側邊欄廣告效果

hou_zi發表於2018-01-31
JS網頁

側邊欄廣告就是指我們在瀏覽網站的時候在網頁的右邊中間部分顯示的那個div，無論我們是拖動滾動條，還是放大縮小視窗，廣告始終顯示在右邊的中間。這裡主要是提供兩種方法的實現。
方法一：
就是使用純粹的佈局來實現，比較簡單，即是使用 position:fixed; 沒有什麼好說的直接看程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>側邊欄廣告</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;/** 最簡單的一種是新方法，就是讓絕對定位設定成固定，但是IE6不會支援此種特性*/
            right: 0;
            top: 50%;
            margin-top: -50px;
        }
    </style>

</head>
<body style="height: 2000px">
<div id="div1">

</div>
</body>
</html>

方法二：
通過設定div top值的方式來實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>側邊欄廣告效果2-</title>

    <style>
        #div1 {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            right: 0px;
        }
        /**
            通過設定div的top值 = scrolltop 的高度 + （視覺化區域的高度-div自身的高度）/2 來實現 div始終位於區域中間位置
        */
    </style>
    <script>
        window.onresize=window.onscroll= window.onload=function () {
            var oDiv=document.getElementById("div1");
            var scrollTop =document.documentElement.scrollTop;
            var t = (document.documentElement.clientHeight-oDiv.offsetHeight)/2;
            oDiv.style.top=scrollTop+t+"px";
        }
    </script>
</head>
<body style="height: 2000px;">

<div id="div1">

</div>
</body>
</html

參考自：妙味課堂的原創js視訊。

相關文章