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

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

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

 //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 } }