從零開始學習前端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.自適應瀑布流效果