从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

未完待续。。。。。。

1：运动原理

通过连续不断的改变物体的位置，而发生移动变化。

使用setInterval实现。

匀速运动：速度值一直保持不变。

多物体同时运动：将定时器绑设置为对象的一个属性。

注：物体每次运动都应该把之前的定时器清除掉。

---

 2：边界处理

遇到边界是应该停止掉还是反弹，方向相反。

改变物体运动方向：将物体的速度值取反。

---

 3：加速减速

加速：速度越来越快。

减速：速度越来越慢。

---

 4：抛物线

水平方向有一速度，垂直方向有一速度，并做*落体。

---

 

5：透明度的变换

难点：处理低版本IE和其它浏览器的透明度兼容性问题。

注：IE7/8下：给对象添加opacity属性。

---

 6：缓冲运动

---

 7：多属性缓冲运动函数封装

在定时器内部添加一个标识来判断属性是否都完成。

---

 8：圆周运动

 

---

 

9：链式运动（通过回调函数来完成）

附录

---

 

demoOne.无缝循环滚动轮播图

 

 

---

 

demoTwo.淘宝放大镜效果

 

 

---

 

demoThree.自适应瀑布流效果