<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height:100%;
}
body{
height:600%;
}
img{
position: absolute;
top:80px;
left: 10px;
display: block;
}
</style>
</head>
<body>
<img src="img/aside.jpg"/>
<script type="text/javascript">
var imgs=document.getElementsByTagName('img')[0];//获取标签
var timer=null;//定义定时器变量并赋值
window.οnscrοll=function(){//给window添加滚动事件
clearInterval(timer);//在使用定时器前先清除定时器，以避免不必要的bug
timer=setInterval(function(){//设置定时器
var speed=(80+document.body.scrollTop-imgs.offsetTop)/10; //80为元素是用户可视的目标距离，（80+document.body.scrollTop（元素距离页面的实际目标距离）-imgs.offsetTop（实时获取元素的当前距离））/10=获取元素每次移动的加速度
speed=speed>0?Math.ceil(speed):Math.floor(speed);//为确保能够到达最终目标距离，给加速度取整
imgs.style.top=speed+imgs.offsetTop+"px";//前进距离=加速度+当前距离
if(imgs.offsetTop==80){//判断是否到达目标距离
clearInterval(timer);//清除定时器
}
},10);
}
</script>
</body>
</html>
扫一扫
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
