JavaScript实现跟随广告的代码怎么编写
短信预约 -IT技能 免费直播动态提醒
本篇文章为大家展示了JavaScript实现跟随广告的代码怎么编写，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
浮动广告是目前网站很常见的一种广告形式，浮动广告能实时跟随用户的浏览，有效的传达产品要表达的意思，达到很好的传播效果。那么浮动广告是怎么实现的呢，其实实现浮动广告并不难，具体如下：
* { margin: 0; padding: 0; } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; }<img class="lazy" data-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实现跟随广告的代码怎么编写，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
