從零開始學習前端JAVASCRIPT — 十一、JavaScript運動模型及輪播圖效果、放大鏡效果、自適應瀑布流

未完待續。。。。。。

1、運動原理

經過接二連三的改變物體的位置，而發生移動變化。

使用setInterval實現。

勻速運動：速度值一直保持不變。

多物體同時運動：將定時器綁設置爲對象的一個屬性。

注：物體每次運動都應該把以前的定時器清除掉。

2、邊界處理

遇到邊界是應該中止掉仍是反彈，方向相反。

改變物體運動方向：將物體的速度值取反。

3、加速減速

加速：速度愈來愈快。

減速：速度愈來愈慢。

4、拋物線

水平方向有一速度，垂直方向有一速度，並作自由落體。

5、透明度的變換

難點：處理低版本IE和其它瀏覽器的透明度兼容性問題。

注：IE7/8下：給對象添加opacity屬性。

6、緩衝運動

7、多屬性緩衝運動函數封裝

在定時器內部添加一個標識來判斷屬性是否都完成。

8、圓周運動

  

9、鏈式運動（經過回調函數來完成）

 

/* 緩衝運動 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.自適應瀑布流效果