JavaScript实现跟随广告的示例代码

浮动广告是目前网站很常见的一种广告形式，浮动广告能实时跟随用户的浏览，有效的传达产品要表达的意思，达到很好的传播效果。那么浮动广告是怎么实现的呢，其实实现浮动广告并不难，具体如下：

        * {
            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.监听网页的滚动事件
        window.onscroll = function() {
            //获取到网页滚动的距离
            //广告图片top的值+网页滚动的距离
            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变量用于标记是否所有的属性都执行完了动画
                let flag = true;

                for (let key in obj) {
                    let target = obj[key];

                    // 1.拿到元素当前的位置
                    let style = getComputedStyle(ele);
                    let begin = parseInt(style[key]) || 0;

                    // 2.定义变量记录步长
                    // 公式: (结束位置 - 开始位置) * 缓动系数(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";
                }

                //判断动画是否执行完
                if (flag) {
                    //动画执行完后关闭定时器
                    clearInterval(ele.timerId);

                    //判断是否传入fn函数，有才执行反之不执行
                    fn && fn();
                }
            }, 100);
        }

        // 网页滚动距离
        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实现跟随广告的示例代码的文章就介绍到这了,更多相关JavaScript 跟随广告内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！