JS之两侧跟随的广告

需求：屏幕滚动多少，两侧的图片联动向下移动等距离

步骤：
1.老三步
2.获取被卷去的头部的值
3.移动两个盒子(缓动移动)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
.img1{
    position: absolute;
    top:120px;
    left: 5px;
}
.img2{
    position: absolute;
    top: 120px;
    right: 5px;
}
div{
    width: 1210px;
    margin: 100px auto;
    text-align: center;
    font: 500 26px/35px "simsun";
}
</style>
</head>
<body>
<img class="img1"src="../images/aside.jpg"/>
<img class="img2"src="../images/aside.jpg"/>
<div>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>

<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>

<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>

<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>
<p>-------梦-------</p>

<p>-------如-------</p>
</div>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript">
//需求：屏幕滚动多少，两侧的图片联动向下移动等距离
//步骤：
//1.老三步
//获取被卷去的头部的值
//3.移动两个盒子(缓动移动)
//
//
var imgArr = document.getElementsByTagName("img");
window.onscroll = function(){
    var val = window.pageYOffset;
    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);
        }
    },18);
}
</script>
</body>
</html>

 

posted @ 2017-12-29 14:57  乖乖乖码  阅读(737)  评论(0)    收藏  举报