JavaScript实现跟随广告的示例代码_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实现跟随广告的示例代码的文章就介绍到这了,更多相关JavaScript 跟随广告内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
