运动基础
1.让div运动起来
2.速度——物体运动的快慢
3.运动中的bug
不会停止
速度取某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快(clearInterval(timer))
匀速运动
速度不变
运动框架及应用
运动框架
1.在开始运动时，关闭已有的定时器
2.把运动和停止隔开（if/else）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
height: 200px;
width: 200px;
background: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<script>
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()"/>
<div id="div1">
</div>
</body>
</html>运动框架实例
例子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>