运动笔记

运动基础

•让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. 匀速运动的停止条件、缓冲运动停止条件

posted @ 2018-10-16 15:04  Eve0803  阅读(183)  评论(0编辑  收藏  举报