<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0;
}
.active{
border:1px solid red;
width:100px;
height:50px;
}
.div1{
width:80px;
height:200px;
background-color: green;
position:absolute;
right:0;
bottom:0;
}
/*.div2{
width:1px;
height:500px;
margin-top: 0px;
position:absolute;
left:500px;
top:0px;
background-color: black;
}*/
</style>
</head>
<body style="height:2000px">
<!-- <input type="button" value="开始运动"> -->
<div class="div1" >
</div>
<div class="div2"></div>
<script>
window.onscroll=function(){
var div1=document.getElementsByClassName('div1')[0];
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var destination=parseInt((document.documentElement.clientHeight-div1.offsetHeight)/2+scrollTop);
startMove(destination);
//若悬浮 在中间 则除2
//parseInt()解决因为除2的小数问题导致物体到不了destination的位置289.5->289 ||290周围跳动
}
var timer=null;
function startMove(target){
var speed=0;
var div1=document.getElementsByClassName('div1')[0];
clearInterval(timer);
timer=setInterval(function(){
speed=(target-div1.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==div1.offsetTop){
clearInterval(timer);
}else{
div1.style.top=div1.offsetTop+speed+"px";
}
},10);
}
</script>
</body>
</html>
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
