运动笔记

运动基础

•让Div运动起来给个定时器改变left数值

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<script>
 function startMove(){
     var oDiv=document.getElementById('div1');
    
    setInterval(function (){
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }, 30);
 }
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

•速度——物体运动的快慢即每次改变的数值

•运动中的Bug

–不会停止

定义一个定时器判断运动的数值等于需求的数值关闭计时器

var timer=null;
function startMove()
{
    var oDiv=document.getElementById('div1');
    
    timer=setInterval(function (){
        if(oDiv.offsetLeft==300)
        {
            clearInterval(timer);
        }
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }, 30);
}

–速度取某些值会无法停止

oDiv.offsetLeft>=300

–到达位置后再点击还会运动

利用判断包起来

if(oDiv.offsetLeft>=300)    //是否到达终点
        {
            clearInterval(timer);    //到达终点
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
        }
    }, 30);

–重复点击速度加快

匀速运动

•速度不变

总结：

运动基础（一）
1. 什么是运动
2. 如何让DIV动起来，运动停止条件
3. 解决连续点击引发的重复运动问题
4. 消除重复点击速度加快的问题
5. 运动框架介绍
6. “分享到”侧边栏实例——便用运动框架
7. 简化函数参数的意义、方式
8. 淡入淡出的图片实例（上）

运动基础（二）
1. 淡入淡出的图片（下）
2. 缓冲运动：缓冲运动的原理、缓冲运动的取值问题
3. Math.ceil、Math.floor 方法
4. 带缓冲运动的侧边栏实例
5. 解决缓冲运动目标值不是整数的情况
6. 匀速运动的停止条件、缓冲运动停止条件