JavaScript运动框架之速度时间版本
# 一、JavaScript运动框架之速度版
# 1.1 运动框架的实现思路
运动，其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值，到达目的地之后停止
-
位移
top,left -
折叠
width,height -
淡入淡出
opacity -
时间有关系
setIntervalsetTimeout
-
用javascript直接获取行间样式很容易，但如果要获取非行间样式那我们只能借助函数了。我这里编写了一个名为getStyle的函数，专门处理取非行间的样式
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 一些案例演示
# 1.2.1 运动之速
<div id="box"></div>
@前端进阶之旅: 代码已经复制到剪贴板
#box {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
}
@前端进阶之旅: 代码已经复制到剪贴板
var box = document.getElementById("box");
var speed = 0; //步长
var target = 600;
var timer = null;
timer = setInterval(function(){
var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
if(curr == target){
clearInterval(timer);
speed = 0
