JS案例-广告缓动居中
2018-11-28 本文已影响0人
hi__world
讨厌广告的千万不要点击进来，恶心的广告就是这样做出来的。
效果：
注意广告缓缓下落
源码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1 {
position: absolute;
top: 80px;
left: 10px;
}
.img2 {
position: absolute;
top: 80px;
right: 10px;
}
div {
width: 1210px;
margin: 100px auto;
text-align: center;
font: 500 26px/35px "simsun";
color: red;
}
</style>
<script>
window.onload = function () {
//需求：屏幕滚动多少，两侧的图片联动向下移动等距离。
//步骤：
//1.老三步
//2.获取被卷去的头部的值
//3.移动两个盒子。（缓动移动）
//1.老三步
var imgArr = document.getElementsByTagName("img");
window.onscroll = function () {
//2.获取被卷去的头部的值
var val=scroll().top;
//3.移动两个盒子。（缓动移动）
animate(imgArr[0],val+80)
animate(imgArr[1],val+80)
}
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target-ele.offsetTop)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.top = ele.offsetTop + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
ele.style.top = target + "px";
clearInterval(ele.timer);
}
},25);
}
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}
</script>
</head>
<body>
<img class="img1" src="images/aside.jpg"/>
<img class="img2" src="images/aside.jpg"/>
<div>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
</div>
</body>
</html>
