缓冲运动
缓冲运动是指，运动物体的速度由快到慢，逐渐停止。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50px; left: 0;}
</style>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div1"></div>
<hr>
<ol>
<li>速度与距离目标位置的大小成正比</li>
</ol>
<script>
var timer = null //存放定时器的返回值，用于关闭定时器
var speed = 0
function startMove() {
var oDiv = document.getElementById('div1');
clearInterval(timer)
setInterval(function(){
var speed = (300 - oDiv.offsetLeft)/10 //分母越大，速度越小
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) //保证速度始终为整数
oDiv.style.left = oDiv.offsetLeft + speed + 'px'
console.log(oDiv.offsetLeft,speed)
}, 30)
}
</script>
</body>Math方法
<script>
alert(Math.ceil(291.99)) //向上取整 292
alert(Math.ceil(-291.1)) //向上取整 -291
alert(Math.floor(3.99)) //向下取整 3
alert(Math.floor(-3.99)) //向下取整 -4
alert(Math.abs(-6)) //绝对值 6
alert(Math.abs(6)) //绝对值 6
alert(Math.round(3.2)) //四舍五入 3
alert(Math.round(-3.6)) //四舍五入 4
</script>实例1、屏幕右侧悬浮框（右下角）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; bottom: 0; right: 0;}
</style>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
<script>
window.onscroll = function(){
var oDiv = document.getElementById('div1')
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //解决兼容性
//oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'
startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop) //可是区域的高度 - 元素高度 + 滚动的高度
}
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - oDiv.offsetTop) / 8
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
if(oDiv.offsetTop == iTarget){
clearInterval(timer)
}else{
oDiv.style.top = oDiv.offsetTop + speed + 'px'
}
}, 30)
}
</script>
</body>实例2、对联悬浮框（垂直居中）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; bottom: 0; right: 0;}
</style>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
<script>
window.onscroll = function(){
var oDiv = document.getElementById('div1')
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //解决兼容性
//oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop + 'px'
startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop)) //(可是区域的高度 - 元素高度) / 2 + 滚动的高度
} //要将目标位置取整，否则会出现元素抖动的问题
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - oDiv.offsetTop) / 8
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
if(oDiv.offsetTop == iTarget){
clearInterval(timer)
}else{
oDiv.style.top = oDiv.offsetTop + speed + 'px'
}
}, 30)
}
</script>
</body>实例3、匀速运动的停止
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50px; left: 0;}
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(100)">
<div id="div1"></div>
<script>
var timer = null //存放定时器的返回值，用于关闭定时器
function startMove(iTarget) {
var oDiv = document.getElementById('div1')
clearInterval(timer) //原则1、在开始运动之前，关闭已有定时器
timer = setInterval(function () {
var speed = 0
if(oDiv.offsetLeft > iTarget){ //通过目标位置和当前位置判断 speed 的正负
speed = -7 //如果当前位置比目标位置大 speed 为负
}else{
speed = 7 //反之为正
}
if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) { //目标位置和 offsetLeft 之间的间距小于 speed，就认为已达到目标位置
clearInterval(timer)
oDiv.style.left = iTarget + 'px' // 设置直接达到目标位置
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'
}
}, 30)
}
</script>
</body>