JavaScript实现跟随广告的代码怎么编写

本篇文章为大家展示了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实现跟随广告的代码怎么编写，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。