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

未完待续。。。。。。

一、运动原理

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

使用setInterval实现。

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

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

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

二、边界处理

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

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

三、加速减速

加速：速度越来越快。

减速：速度越来越慢。

四、抛物线

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

五、透明度的变换

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

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

六、缓冲运动

七、多属性缓冲运动函数封装

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

八、圆周运动

九、链式运动（通过回调函数来完成）

/*
缓冲运动
obj：运动的对象
target：运动属性和终点值的对象
fn：回调函数
ratio：运动系数，默认值为8
*/
function bufferMove(obj, target, fn, ratio = 8) {
// 清除旧的定时器
clearInterval(obj.timer);

// 开启新的定时器
obj.timer = setInterval(function () {
var allOK = true;
for(var attr in target) {
// 获取当前值
var cur = 0;
if(attr === 'opacity') {
cur = parseInt(getStyle(obj, 'opacity') * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}

// 计算速度
var speed = (target[attr] - cur) / ratio;

// 判断方向
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

// 计算下次的值
var next = cur + speed;

// 赋值
if(attr === 'opacity') {
obj.style.opacity = next / 100;
obj.style.filter = 'alpha(opacity=' + next + ')';
} else {
obj.style[attr] = next + 'px';
}

// 判断当前属性是否运动完毕
if(next !== target[attr]) {
allOK = false;
}
}

// 如果allOk为true，则说明所有的运动均已运动完毕
if(allOK) {
// 清除定时器
clearInterval(obj.timer);
// 执行回调函数
if(fn) {
fn();
}
}

}, 50);
}

/*
获取当前样式值
*/
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

附 录

1.无缝循环滚动轮播图

2.淘宝放大镜效果

http://vip2.svnspot.com/rocky.javascript/

3.自适应瀑布流效果