js運動基礎2 右側懸浮框 緩衝運動 勻速運動的停止條件
阿新 • • 發佈：2019-02-07
緩衝運動：
- 逐漸變慢，最後停止
- 距離越遠速度越大（速度由距離決定 速度=（目標值-當前值）/縮放係數）
- 例子：緩衝選單 （Bug:速度取整）
緩衝運動：隨著距離減小，速度也越來越小。用除數控制速度。速度用整數。
oDiv.offsetTop //滾動條滾動的距離+視窗距離-物體寬度<style> #div1{ width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; } </style> <script> function startMove(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div1'); setInterval(function(){ //遵循逐漸變慢的原則，如果是300-oDiv.offsetLeft，那麼一開始的速度太大，一下子就跑到300px處了。 //要控制緩衝的快慢，就直接控制除數。改為4變快 var speed=(300-oDiv.offsetLeft)/10; oDiv.style.left=oDiv.offsetLeft+speed+"px"; },30); } </script> <body> <input type="button" id="btn" value="開始運動" onclick="startMove()"/> <div id="div1"></div> </body>
出現的問題：
<script> function startMove(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div1'); setInterval(function(){ var speed=(300-oDiv.offsetLeft)/10; oDiv.style.left=oDiv.offsetLeft+speed+"px"; document.title=oDiv.offsetLeft+" "+speed; },30); } </script>
距離到296 速度到0.4就停下了。
計算機所能接受到最小單位為px,290.5px計算機會預設為290px,並且不會四捨五入。
oDiv.style.left=oDiv.offsetLeft+speed+"px"; oDiv.offsetLeft為296px speed為0.4 oDiv.style.left為296.4---296速度不能是小數。
我們給speed做一個向上取整。
<script> function startMove(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div1'); setInterval(function(){ var speed=(300-oDiv.offsetLeft)/10; speed=Math.ceil(speed); oDiv.style.left=oDiv.offsetLeft+speed+"px"; document.title=oDiv.offsetLeft+" "+speed; },30); } </script>
但凡我們遇到緩衝運動，我們都要取整數。
緩衝選單 ：右側懸浮框。
<style>
#div1{
width: 100px;
height: 200px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById('div1');
//scrollTop 起始位置到末位置的滑動高度,獲取滾動條的位置。
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//documentElement.clientHeight 頁面可視區寬高
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>但是div會在這兒抖一抖的。我們讓運動讓它緩緩地過去。
<style>
#div1{
width: 100px;
height: 200px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById('div1');
//scrollTop 起始位置到末位置的滑動高度,獲取滾動條的位置。
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//documentElement.clientHeight 頁面可視區寬高
// 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)/4;
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>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>對聯懸浮框：懸浮框在中間的位置。bug:速度取整。
潛在問題：目標值不是整數時。
oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px' startMove((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);<style>
#div1{
width: 100px;
height: 200px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById('div1');
//scrollTop 起始位置到末位置的滑動高度,獲取滾動條的位置。
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//documentElement.clientHeight 頁面可視區寬高
// oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'
//(document.documentElement.clientHeight-oDiv.offsetHeight)/2 有可能出現小數，物體上下來回跳動，所以我們取整
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
document.getElementById('txt1').value=oDiv.offsetTop;
oDiv.style.top = oDiv.offsetTop + speed + 'px';
}
},30);
}
</script>
</head>
<body style="height: 2000px;">
<input type="text" id="txt1" style="position: fixed; right: 0;top: 0"/>
<div id="div1"></div>
</body>勻速運動的停止條件：
- 運動終止條件
- 勻速運動：距離足夠近
- 緩衝運動：兩點重合
Math.abs()取絕對值。
if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
clearInterval(timer);
oDiv.style.left=iTarget='px';
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 600px;
top: 50px;
}
#div2{
width: 1px;
height: 300px;
background: black;
position: absolute;
left: 300px;
top: 0;
}
#div3{
width: 1px;
height: 300px;
background: black;
position: absolute;
left: 100px;
top: 0;
}
</style>
<script>
var timer=null;
function startMove(iTarget){
/*到100和到300，speed為7每次加7到不了100或300，所以快到100或300會來回顫抖。*/
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer= setInterval(function(){
var speed=0;
//var iSpeed=iTarget-oDiv.offsetLeft>0?7:-7;
if(oDiv.offsetLeft<iTarget){
speed=7;
}else{
speed=-7;
}
if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
clearInterval(timer);
oDiv.style.left=iTarget+'px';
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30);
}
</script>
<body>
<input type="button" value="到100" onclick="startMove(100)"/>
<input type="button" value="到300" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>