<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 150px;
background-color: pink;
position: absolute;
}
</style>
<script>
window.onscroll=function()
{
var div1=document.getElementById("div1");
var gaodu=document.documentElement.scrollTop||document.body.scrollTop;
// div1.style.top = document.documentElement.clientHeight - div1.offsetHeight + gaodu + "px";
yundong(document.documentElement.clientHeight - div1.offsetHeight + gaodu); //让div保持在左下角。
var timer=null; //缓冲运动定时器
function yundong(aa)
{
var div1=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function ()
{
var sudu=(aa-div1.offsetTop)/18;
sudu=sudu>0?Math.ceil(sudu):Math.floor(sudu);
if(div1.offsetTop==aa)
{
clearInterval(timer);
}
else
{
div1.style.top=div1.offsetTop+sudu+"px";
}
},30);
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
慕瓜9220888
相关分类