例子：一个按钮，一个div,点击按钮，让div向右运动到某一个位置暂停
oBtn = document.getElementById('btn' oDiv = document.getElementById('div1' iTimer = = = setInterval( (oDiv.offsetLeft == 500= oDiv.offsetLeft + 10 + 'px'30
所以我们可以知道运动需要注意：1 运动前清除上次定时器
2 开启定时器，指向运动
3 运动中指定运动的形式（匀速缓存还是什么的），并且加入条件判断，以便停止
封装函数：对于以上运动的改进代码，我就不做具体的示范了，我们直接来进行简单的封装。在封装函数中顺便改进上面的函数了。
oBtn = document.getElementById('btn' oDiv = document.getElementById('div1' iTimer = =
iTimer = setInterval( (oDiv.offsetLeft == 500
} = oDiv.offsetLeft + 10 + 'px';
30
扩展需求1：根据上面的函数我们可以实现，一个物体向右运动到某一个位置。那么我们现在如果有两个物体，一个向左运动，一个向右运动，且运动的目的地是不同的，那么上面的函数是不是就不满足了呢？
改进：多物体多方向运动
= ,0, 10= ,-100, -10= setInterval( (obj.offsetLeft === obj.offsetLeft + iSpeed + 'px'30
扩大需求2：现在我们不仅仅改变的是物体左右移动，我们想让一个物体的透明度也能改变。能作出淡入淡出的效果。
存在的问题是：
问题1 ： 在css中，不同浏览器对透明度的设置方式不同。
IE： filter: alpha(opacity=30);（0-1000.3;（0-1
0.1+0.2)
alert(0.2+0.7)
问题2 ：如何获取到物体的透明度，用obj.style.opacity 吗？
这里要说明一个知识点，在JS中用style只能获取行间样式。 不能获取css中的样式。这个时候我们用什么呢？下面的两个方法可以获取非行间样式，有兼容问题：
1 getComputedStyle： getComputedStyle(element,随意值(写什么都可以，比如false)).attr：这个获取的是计算机计算后的样式，不能获取复合样式，只有标准浏览器支持IE6 7 8不兼容。
2 currentStyle ：currentStyle[attr]，只有IE6 7 8兼容 ，可以获取非行间样式，还可以获取自定义样式。
所以需要做一下兼容，我们可以封装成一个函数，如下：
obj.currentStyle?currentStyle的原因，它能读取到任何样式的值，哪怕不存在
所以对于透明度的改变，我们可以封装成如下的函数：
iCur = 0;
iTimer = setInterval(
iCur = Math.round(getStyle( obj, 'opacity' ) * 100 (iCur == {
obj.style.opacity = (iCur + iSpeed) / 100= 'alpha(opacity='+ (iCur + iSpeed) +')'30
这只是改变透明度的函数封装，要是能把透明度的封装函数和前面的运动封装函数，结合起来，不就能封装成一个可以改变透明度，也可以改变位置的函数了吗。。。。
那么依照我们的合并原则，找出两个封装函数的不同之处：
1 运动的属性不同（attr）
2 因为不同的属性处理不同，其实主要是透明度处理是有差别的，其他宽高改变位置改变其实都一样）这个时候的差别，可以采用判断来解决
// 还解决了解决了一个问题是因为之前只有一个定时器，现在因为有多个属性可以运动了，所以就不能只用一个定时器了去控制了，每个物体运动的时候就应该有自己的定时器，所以就把定时器就用obj.timer上，这样每个物体都不同啦。
iCur = 0= setInterval( (attr == 'opacity'= Math.round(getStyle( obj, 'opacity' ) * 100= (iCur == (attr == 'opacity'= (iCur + iSpeed) / 100= 'alpha(opacity='+ (iCur + iSpeed) +')'= iCur + iSpeed + 'px'30 getComputedStyle(obj,
不过上面的函数，还是不能满足某些需求,比如我想要一个物体的两个属性同时运动，下面这样是实现不了的。
, 'width', 200, 10, 'height', 200, 10);
那么怎么样实现这两个属性可以同时运动呢？这个时候我们可以考虑用json的格式
oDiv1.onclick = 2000010 iCur = 0= setInterval( ( attr iTarget = (attr == 'opacity'= Math.round(getStyle( obj, 'opacity' ) * 100= (iCur == (attr == 'opacity'= (iCur + iSpeed) / 100= 'alpha(opacity='+ (iCur + iSpeed) +')'= iCur + iSpeed + 'px'30 getComputedStyle(obj,
存在问题：上面的运动速度都是一样的，但是传进去的目标点是不一样的，这个时候就会有一个属性先到，那么运动就终止了。所以我们需要解决的是，当所有的属性都到达了目标点，才让运动终止。
解决：定义一个开关，每次运动前假设它是真的，在运动中，只要有一个属性没运动到终点，就把开关变成假，在循环外面进行判断，当所有属性都运动到终点了，开关肯定都是真的，就会清除定时器了。
oDiv1.onclick = 20030010 iCur = 0= setInterval(
iBtn = ( attr iTarget = json[attr];
(attr == 'opacity'= Math.round(getStyle( obj, 'opacity' ) * 100= (iCur != (attr == 'opacity'= (iCur + iSpeed) / 100= 'alpha(opacity='+ (iCur + iSpeed) +')'= iCur + iSpeed + 'px'
30 getComputedStyle(obj,
扩大需求：假如我们这次实现的不是多个属性同时运动，我希望先把高改变，接着再改变宽，这个时候，我们需要的就是个回调函数了（fn）。za
oDiv1.onclick = 20010, 20010 iCur = 0= setInterval( iBtn = ( attr iTarget = (attr == 'opacity'= Math.round(getStyle( obj, 'opacity' ) * 100= (iCur !== (attr == 'opacity'= (iCur + iSpeed) / 100= 'alpha(opacity='+ (iCur + iSpeed) +')'= iCur + iSpeed + 'px'&&文章有讲过这个用法。
30 getComputedStyle(obj,