js运动之缓冲运动代码实例讲解
程序员文章站
2022-05-18 11:09:45
1、在计算速度的时候一定要记得取整，因为像素是计算机所能接收到的最小单位，所以如果是299.9px,计算机会认为是299px，计算机也不会给你四舍五入。
2、缓冲运动：逐渐变慢，...
1、在计算速度的时候一定要记得取整，因为像素是计算机所能接收到的最小单位，所以如果是299.9px,计算机会认为是299px，计算机也不会给你四舍五入。
2、缓冲运动：逐渐变慢，最后停止。距离越远，速度越大。即速度与距离成正比。速度=（目标值-当前值）/缩放系数
3、缓冲菜单：根据页面滚动的缓冲侧边栏。这个因为会除以2，所以这个目标值也要取整。
侧边滑动框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边滚动菜单栏</title>
<style>
#p1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
right: 0;bottom: 0;}
</style>
<script>
window.onscroll=function(){
var p1=document.getelementbyid('p1');
var scroll = document.documentelement.scrolltop || document.body.scrolltop;
// alert(document.body.scrollheight);
//document.body.scrollheight：因为是body点出的scrollheight,所以是当前窗口整个的高度
//document.documentelement.clientheight：得到的是当前窗口的高度,可视区高度
// p1.offsettop：得到的是这个p的最顶端距离整个页面最顶端的高度
//p1.offsetheigh,获取元素的高度
//scroll：得到的是滚动的高度
// alert(document.documentelement.clientheight+'---'+p1.offsetheigh+'---'+scroll+'---'+p1.style.top);
//p1.style.top = document.documentelement.clientheight-p1.offsetheight+scroll+'px';
startmove(parseint((document.documentelement.clientheight-p1.offsetheight)/2+scroll));
}
var time = '';
function startmove(target){
var p1=document.getelementbyid('p1');
clearinterval(time);
time=setinterval(function(){
var speed = (target-p1.offsettop)/2;
//对于速度，如果速度要取整，所以如果速度大于0，要向上取整，小于0，向下取整。
speed = speed>0?math.ceil(speed):math.floor(speed);
if(p1.offsettop==target){
clearinterval(time);
}else{
p1.style.top=p1.offsettop+speed+'px';
}
},30);
}
</script>
</head>
<body style="height: 2000px;">
<p id="p1">
</p>
</body>
</html>
补充：下面这个代码，因为只是给body设置了2000的高度，虽然p1设置了绝对定位，bottom等于0，但是他的位置仍是在当前页面的最底部，当滚动条滚动时，他的相对于页面背景的位置不会发生改变，但是相对于当前窗口的位置会发生改变。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
right: 0;bottom: 0;}
</style>
</head>
<body style="height: 2000px;">
<p id="p1">
</p>
</body>
</html>
缓冲运动停止的条件
<meta charset="utf-8">
<title>缓冲运动停止条件</title>
<style>
#p1{width: 100px;height: 100px;background-color: #0000ff;position: absolute;left: 600px;}
#p2{width: 1px;height: 200px;background-color: black;position: absolute;left: 100px;}
#p3{width: 1px;height: 200px;background-color: black;position: absolute;left: 300px;}
</style>
<script>
function startmove(target){
var time='';
clearinterval(time);
var p1 = document.getelementbyid('p1');
time = setinterval(function(){
var speed=0;
if(p1.offsetleft<target){
speed=7;
}else{
speed=-7;
}
//如果不加if条件来判断，这个蓝色p1块会在实线附近抖动。
//if条件句判断的是一个范围，但这个范围的时候，直接使他的left，在实线附近，即target的值。
if(math.abs(p1.offsetleft-target)<=7){
//把定时器关了，然后直接使他的left，在实线附近，即target的值，
clearinterval(time);
//记得加上px
p1.style.left=target+'px';
}else{
p1.style.left=p1.offsetleft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<input id='btn2' type="button" value="到100" onclick="startmove(100)" />
<input id='btn3' type="button" value="到300" onclick="startmove(300)" />
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>