分页运动效果展示

有了DOMReady框架和move运动框架，就可以做一些好玩的事情了，现在制作一个运动的效果，页面中有好一个按钮和几块需要展示的内容，需求是点击按钮，内容收缩消失于一点，在点击从这一点放大运送至页面中的位置上；代码如下：

//样式
*{margin:0; padding:0; list-style:none;}
ul{width:366px; margin:100px auto;}
.clearfix:after{display:block; clear:both; content:"";}
.clearfix{zoom:1;}
li{width:100px; height:100px; background:red; margin:10px; border:1px solid blue; float:left;}
//布局
<input type="button" value="按钮" id="btn1" />
<ul id="ul1" class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
 </ul>

//js代码
DOMReady(function(){
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');
    var aLi = oUl.children;
    
    var arrPos = [];
    for(var i=0; i<aLi.length;i++){
        arrPos[i] = {left:aLi[i].offsetLeft,top:aLi[i].offsetTop};//获取每个运动元素的位置，存放于数组中；
    }
    for(var i=0; i<arrPos.length; i++){//把元素从新定位到本身的位置上，因为元素本身可能没有定位，在不好更改css样式的前提下对元素重新定位， 父级也需要定位position：relative； 宽高需要获取赋值，这里就不写了，实际中不写布局会乱的；要注意
        aLi[i].style.position = 'absolute';
        aLi[i].style.left = arrPos[i].left + 'px';
        aLi[i].style.top = arrPos[i].top + 'px';
        aLi[i].style.margin = '0';//这里要注意，不写整体会偏移，因为每个li都有自己的margin属性，在给left和top赋值之后，浏览器会重新渲染margin属性，这样会布局就不能完全还原了；
    }
//随机函数m到n之间不包括n---------------------[m,n);运动的时候给每个li一个随机颜色
function rnd(m,n){
    return parseInt(Math.random()*(n-m)+m);
}
    
    var bOver = true;//定义一个开关，在没运动结束的时候点击按钮无效
    var timer = null;
    oBtn.onclick = function(){
        if(!bOver){return}
        var iNow = 0;
        bOver = false;//改变开关的值
        timer = setInterval(function(){
            (function(index){
                move(aLi[iNow],{width:0,height:0,opacity:0,left:0,top:0},{complete:function(){
                    if(index == aLi.length-1){//判断结束
                        for(var i=0; i<aLi.length; i++){
                            aLi[i].style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                        }
                        iNow = aLi.length-1;
                        timer = setInterval(function(){
                            (function(index){
                                move(aLi[iNow],{width:100,height:100,opacity:100,left:arrPos[iNow].left,top:arrPos[iNow].top},{complete:function(){
                                    index == 0 && (bOver = true);//判断结束并修改开关值
                                }});
                            })(iNow);
                            iNow--;
                            iNow<0 && clearInterval(timer);
                        },100);
                    }
                }});
            })(iNow);
            iNow++;
            iNow>=aLi.length && clearInterval(timer);
        },100);
    };
});