JavaScript-運動基礎
阿新 • • 發佈：2019-01-06
運動基礎
1.讓div運動起來
2.速度——物體運動的快慢
3.運動中的bug
不會停止
速度取某些值會無法停止
到達位置後再點選還會運動
重複點選速度加快(clearInterval(timer))
勻速運動
速度不變
運動框架及應用
運動框架
1.在開始運動時，關閉已有的定時器
2.把運動和停止隔開（if/else）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title 運動框架例項
例子1：“分享到”側邊欄
通過目標點，計算速度值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 150px;height: 200px;
background: green;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;height: 60px;
line-height: 20px;
background: blue;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(0)
};
oDiv.onmouseout=function(){
startMove(-150)
};
};
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
}
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>例子2：“淡入淡出的圖片”
用變數儲存透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
filter:alpha(opacity:30);opacity:0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(100);
};
oDiv.onmouseout=function(){
startMove(30);
};
};
var alpha=30;
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(alpha<iTarget)
{
speed=10;
}
else
{
speed=-10;
}
if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
})
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>緩衝運動
1.逐漸變慢，最後停止
2.距離越遠速度越大
速度由距離決定
速度=（目標值-當前值）/縮放係數
例子：緩衝選單
bug：速度取整
跟隨頁面滾動的緩衝側邊欄
潛在問題：目標值不是整數時
速度與距離成正比
（距離大速度大，距離小速度小）
Math.ceil(num)//向上取整
Math.floor(num)//向下取整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
left: 0;
top: 50px;
}
</style>
<script>
function startMove(){
var oDiv=document.getElementById('div1');
setInterval(function(){
var speed=(300-oDiv.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oDiv.style.left=oDiv.offsetLeft+speed+'px';
},30);
}
</script>
</head>
<body>
<input type="button" value="開始運動" onclick="startMove()"/>
<div id="div1">
</div>
<div id="div2"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<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);
};
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>
</head>
<body style="height: 1500px;">
<div id="div1"></div>
</body>
</html>勻速運動的停止條件
運動終止條件
勻速運動：距離足夠近
緩衝運動：兩點重合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
left: 0;
top: 50px;
position: absolute;
}
#div2{
width: 1px;
height: 100px;
background: black;
left: 100px;
top:0;
position: absolute;
}
#div3{
width: 1px;
height: 100px;
background: black;
left: 300px;
top: 0px;
position: absolute;
}
</style>
<script>
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
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>
</head>
<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>
</html>