每天一句：前进缓慢没关系，只要你别停下脚步。
一、运动框架
- 运动基础
- 在开始运动时，关闭已有定时器；
- 把运动和停止分隔开(if/else)；
案例: div的移动
案例: startMove的封装(分享到)
案例: 图片的淡入淡出
- 缓冲运动
- 逐渐变慢，最后停止(越接近终点速度越小)
- 距离越远速度越大
> 速度由距离决定
> 速度 = (目标值-当前值)/缩放系数
向上取整: Math.ceil(12.3); // 13
向下取整: Math.floor(7.9); // 7
Math.floor(-2.1) // -3
绝对值: Math.abs(-5); // 5
window.scroll窗口滚动事件
// 兼容问题 (获取滚动条位置 )
var top = document.documentElement.scrollTop || document.body.scrollTop;
案例: 始终在窗口中间位置显示—分享到
案例: 分享到闪烁问题(缓冲运动的具体使用)
案例: 匀速运动
- 运动终止条件
缓冲运动: 两点重合
匀速运动: 距离足够近
二、多物体运动框架
多个物体同时运动:
- 将定时器作为物体的属性
- 参数的传递: 物体、目标值
> 所有东西都不能公用(不然肯定会出问题)
> 属性与运动对象绑定: 速度、其他属性(例如透明度等)
案例: 物体变宽(缓冲)
案例: 多物体变宽
三、任意值运动框架
offsetWidth(offset..都有这类问题):
offsetWidth: div自身宽度width + div的padding + div的border
#div1{
width: 100px;
height: 100px;
background: paleturquoise;
/*修改样式以后，div会自动变宽了*/
border: 1px solid gray;
}
// 原本是自动变小的，但加上边框后，div自动变大
oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
分析: oDiv.offsetWidth是102px，当每次定时器触发的时候，oDiv.offsetWidth都会减去1，那么减去的就1px值，但下次过后不要忘记还有边框border: 2px值；
width: 100px offSetWidth: 102px width: 102px - 1px = 101px;
width: 101px offSetWidth: 103px width: 103px - 1px = 102px;
width: 102px offSetWidth: 104px width: 104px - 1px = 103px;
….
备注: 之后项目时，最好不要使用offsetWidth/offsetHeight..，因为这个非常容易出问题，学习阶段可以使用，因为简单。更多对于内联样式也不方便操作，那么即可以通过以下方式获取到对应样式，然后进行操作;
// 不建议使用的
//oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
// 内联样式，操作不方便
// oDiv.style.width = parseInt(oDiv.style.width) - 1 + 'px';
// 注意: 属性是字符串来的 — 推荐使用方式
oDiv.style.width = parseInt( getStyle(oDiv, 'width') ) - 1 + 'px';
// 获取属性名对应的属性值
function getStyle(obj, att){
return window.getComputedStyle ? getComputedStyle(obj)[att] : obj.currentStyle[att];
}
案例: 任意值变化封装
案例: 任意值变化(透明度处理)
案例: 图片详情展示
案例: 仿flash图片轮播
四、链式运动框架
- 回调函数
> 运动停止时，执行函数；
> 运动停止时，开始下一次运动;
- JSON数据格式
JSON是一种轻量级的数据交换格式，JSON采用完全独立于语言的文本格式，这些特性使得JSON成为理想的数据交换语言。易于阅读和编写，同时也易于机器解析和生成。
JSON的构建结构: “关键字/值”这种键值对的结合;
var json = {
name: 'liming',
sex: '男',
price: [98, 80, 100]
};
// 访问方式
alert(json.name); // 通过点语法访问
alert(json['sex']); // 通过方括号
// json的遍历
// 遍历的key就是JSON的关键字
for(key in json){
// 取出关键字对应的值
alert(json[key]);
}
案例: setStyle封装
五、完美运动框架
多个值同时变化
> setStyle同时设置多个属性
- 参数传递
json的使用
forin遍历属性
> 运用到运动框架
> 检测运动停止
- 标志变量
六、运动框架应用
案例: 循环滚动(无缝衔接)
七、碰撞运动
- 碰撞运动
- 撞到目标点，速度反转
- 无重力的悬浮div
速度反转
滚动条闪烁问题
越界后直接拉回来
- 加入重力
- 反转速度的同时，减小速度
- 纵向碰撞，横向速度也减小
- 横向速度小数问题(负数)
