1.实现缓冲运动:
- 逐渐变慢,最后停止
- 距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
left:600px;
top:40px;
}
span{
width:1px;
height:300px;
position:absolute;
left:300px;
background:black;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
move(300);
}
}
function move(target){
var timer=null;
var oDiv=document.getElementById("div1");
var speed=0;
clearInterval(timer);
timer=setInterval(function(){
speed=(target-oDiv.offsetLeft)/8;
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
if(oDiv.offsetLeft==target){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<input type="button" id="btn" value="运动">
<div id="div1"></div>
<span></span>
</body>
</html>
缓冲菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
right:0;
}
</style>
<script>
//功能:实现div跟随着屏幕做缓冲运动,实现思路:通过滚动条+(屏幕可视区-div的自身的高度)/2,速度设置可以改变
window.onscroll=function(){
var oDiv=document.getElementById("div1");
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
// oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;//这里的小数会造成bug
startMove(parseInt(t));//这里的小数如果不取整,会造成div上下抖动
}
var timer=null;
function startMove(target){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=(target-oDiv.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop==target){
clearInterval(timer);
}else{
oDiv.style.top=oDiv.offsetTop+speed+"px";
}
},30)
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
匀速运动的改进:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
left:500px;
top:40px;
}
span{
width:1px;
height:300px;
background:black;
position:absolute;
left:300px;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
move(300);
}
}
var timer=null;
function move(target){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft<target){
speed=7;
}else{
speed=-7;
}
if(Math.abs(oDiv.offsetLeft-target)<7){ //是否到达终点
clearInterval(timer);
oDiv.style.left=target+"px";
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="运动" id="btn">
<div id="div1"></div>
<span></span>
</body>
</html>
总结:运动终止条件
匀速运动:距离足够近
缓冲运动:两点重合