多圖片展示及運動框架總結

1、運動框架演變過程

startMove(iTarget)    運動框架之單物體

startMove(obj,iTarget)   多物體同時爲每一個obj增加了自定義屬性timer

startMove(obj,attr,iTarget)  任意值之單個

startMove(obj,attr,iTarget,fn) 鏈式運動之單個值鏈式運動

startMove(obj,json)  任意值之多個同時運動

startMove(obj,json,fn) 完美運動框架 

2、relative沒有脫離文檔流

absolute脫離了文檔流,不佔位置,元素之間不受影響

3、位置佈局有2種方式可以實現,1種是在CSS中通過浮動方便實現,另一種是在JS中通過絕對定位方便實現

4、佈局轉換:文檔流定位->絕對定位

5、人的出場順序很重要,代碼君也如此

 for(i=0;i<aLi.length;i++){
                    aLi[i].style.left=aLi[i].offsetLeft+'px';
                    aLi[i].style.top=aLi[i].offsetTop+'px';
                }
 for(i=0;i<aLi.length;i++) {
                aLi[i].style.position='absolute';
                aLi[i].style.margin=0;
            }

6、不用擔心數量,不用擔心自適應問題

<style>
        #ul1{width:366px;margin:0 auto;}
        #ul1 li{list-style:none;float:left;width:100px;height:100px;background:#CCCCCC;
                border:1px solid #000000;margin:10px;}
    </style>

7、margin周圍沒有其他元素時,是相對自身,margin負值用途多多



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章