JavaScript實現(xiàn)跟隨廣告的示例代碼

更新時間：2021年11月08日 11:27:51 作者：小白小白從不日白

浮動廣告是目前網(wǎng)站很常見的一種廣告形式,浮動廣告能實時跟隨用戶的瀏覽,有效的傳達產(chǎn)品要表達的意思,達到很好的傳播效果。本文使用JavaScript實現(xiàn)跟隨廣告的示例代碼，感興趣的可以了解一下

浮動廣告是目前網(wǎng)站很常見的一種廣告形式，浮動廣告能實時跟隨用戶的瀏覽，有效的傳達產(chǎn)品要表達的意思，達到很好的傳播效果。那么浮動廣告是怎么實現(xiàn)的呢，其實實現(xiàn)浮動廣告并不難，具體如下：

        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            position: absolute;
            left: 0;
        }
        
        p {
            text-align: center;
            line-height: 40px;
        }

    <img src="images/left_ad.png" alt="">
    <p>我是正文1</p>
    <p>我是正文2</p>
    <p>我是正文3</p>
    <p>我是正文4</p>
    <p>我是正文5</p>
    <p>我是正文6</p>
    <p>我是正文7</p>
    <p>我是正文8</p>
    <p>我是正文9</p>
    <p>我是正文10</p>
    <p>我是正文11</p>
    <p>我是正文12</p>
    <p>我是正文13</p>
    <p>我是正文14</p>
    <p>我是正文15</p>
    <p>我是正文16</p>
    <p>我是正文17</p>
    <p>我是正文18</p>
    <p>我是正文19</p>
    <p>我是正文20</p>
    <p>我是正文21</p>
    <p>我是正文22</p>
    <p>我是正文23</p>
    <p>我是正文24</p>
    <p>我是正文25</p>
    <p>我是正文26</p>
    <p>我是正文27</p>
    <p>我是正文28</p>
    <p>我是正文29</p>
    <p>我是正文30</p>
    <p>我是正文31</p>
    <p>我是正文32</p>
    <p>我是正文33</p>
    <p>我是正文34</p>
    <p>我是正文35</p>
    <p>我是正文36</p>
    <p>我是正文37</p>
    <p>我是正文38</p>
    <p>我是正文39</p>
    <p>我是正文40</p>
    <p>我是正文41</p>
    <p>我是正文42</p>
    <p>我是正文43</p>
    <p>我是正文44</p>
    <p>我是正文45</p>
    <p>我是正文46</p>
    <p>我是正文47</p>
    <p>我是正文48</p>
    <p>我是正文49</p>
    <p>我是正文50</p>

        //1.拿到需要操作的元素
        const oAdImg = document.querySelector("img");
 
        //2.計算廣告圖片top的值=(視口高度-廣告高度)/2
        const screenHeight = getScreen().height;
        const imgHeight = oAdImg.offsetHeight;
        const offsetY = (screenHeight - imgHeight) / 2;
        // console.log(offsetY);
 
        //3.將計算之后的top值，設置給廣告圖片
        // oAdImg.style.top = offsetY + 'px';
        easeAnimation(oAdImg, {
            "top": offsetY
        });
 
        //4.監(jiān)聽網(wǎng)頁的滾動事件
        window.onscroll = function() {
            //獲取到網(wǎng)頁滾動的距離
            //廣告圖片top的值+網(wǎng)頁滾動的距離
            let pageOffsetY = getPageScroll().y;
            easeAnimation(oAdImg, {
                "top": offsetY + pageOffsetY
            });
        };
 
        // 瀏覽器視口寬高
        function getScreen() {
            let width, height;
            if (window.innerWidth) {
                width = window.innerWidth;
                height = window.innerHeight;
            } else if (document.compatMode === "BackCompat") {
                width = document.body.clientWidth;
                height = document.body.clientHeight;
            } else {
                width = document.documentElement.clientWidth;
                height = document.documentElement.clientHeight;
            }
            return {
                width: width,
                height: height
            }
        }
 
        // 緩動動畫
        function easeAnimation(ele, obj, fn) {
            clearInterval(ele.timerId);
            ele.timerId = setInterval(function() {
                // flag變量用于標記是否所有的屬性都執(zhí)行完了動畫
                let flag = true;
 
                for (let key in obj) {
                    let target = obj[key];
 
                    // 1.拿到元素當前的位置
                    let style = getComputedStyle(ele);
                    let begin = parseInt(style[key]) || 0;
 
                    // 2.定義變量記錄步長
                    // 公式: (結(jié)束位置 - 開始位置) * 緩動系數(shù)(0 ~1)
                    let step = (target - begin) * 0.3;
 
                    // 3.計算新的位置
                    begin += step;
                    if (Math.abs(Math.floor(step)) > 1) {
                        flag = false;
                    } else {
                        begin = target;
                    }
                    // 4.重新設置元素的位置
                    ele.style[key] = begin + "px";
                }
 
                //判斷動畫是否執(zhí)行完
                if (flag) {
                    //動畫執(zhí)行完后關閉定時器
                    clearInterval(ele.timerId);
 
                    //判斷是否傳入fn函數(shù)，有才執(zhí)行反之不執(zhí)行
                    fn && fn();
                }
            }, 100);
        }
 
        // 網(wǎng)頁滾動距離
        function getPageScroll() {
            let x, y;
            if (window.pageXOffset) {
                x = window.pageXOffset;
                y = window.pageYOffset;
            } else if (document.compatMode === "BackCompat") {
                x = document.body.scrollLeft;
                y = document.body.scrollTop;
            } else {
                x = document.documentElement.scrollLeft;
                y = document.documentElement.scrollTop;
            }
            return {
                x: x,
                y: y
            }
        }

效果圖

到此這篇關于JavaScript實現(xiàn)跟隨廣告的示例代碼的文章就介紹到這了,更多相關JavaScript 跟隨廣告內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript生成圖形驗證碼
這篇文章主要為大家詳細介紹了JavaScript生成圖形驗證碼的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
Js模塊打包exports require import的用法和區(qū)別
這篇文章主要介紹了Js模塊打包exports require import的用法和區(qū)別，對模塊打包感興趣的同學，可以參考下
2021-05-05
如何使用webpack打包一個庫library的方法步驟
這篇文章主要介紹了如何使用webpack打包一個庫library的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
JS實現(xiàn)的類似微信聊天效果示例
這篇文章主要介紹了JS實現(xiàn)的類似微信聊天效果,可實現(xiàn)模擬微信聊天效果的對話框信息傳輸,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
javascript實現(xiàn)循環(huán)廣告條效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)循環(huán)廣告條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
JS計算輸出100元錢買100只雞問題的解決方法
這篇文章主要介紹了JS計算輸出100元錢買100只雞問題的解決方法,簡單描述了100元錢買100只雞問題并結(jié)合實例形式分析了問題解決的思路與具體實現(xiàn)方法,需要的朋友可以參考下
2018-01-01
js判斷變量初始化的三種形式及推薦用的形式
這篇文章主要介紹了js判斷變量初始化的三種形式及推薦用的形式,需要的朋友可以參考下
2014-07-07
詳解Typescript中奇怪的賦值操作
這篇文章主要來和大家討論一下typescript中一些奇怪的賦值語句,探索其背后原因,更深入的了解typescript作為一個結(jié)構(gòu)化系統(tǒng)的特性,感興趣的可以了解下
2024-02-02
JavaScript 權(quán)威指南(第四版) 讀書筆記
JavaScript 權(quán)威指南(第四版) 讀書筆記，大家可以看看。
2009-08-08
javascript實現(xiàn)復選框全選或反選
這篇文章主要為大家詳細介紹了javascript實現(xiàn)復選框全選或反選，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02