js运动九宫格展开

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>未命题</title>
        <style>
            #ul1{
                margin: 100px auto 0;
                330px;

            }
            #ul1 li {
                height:100px;
                100px;
                position:relative;
                background: red;
                list-style-type:none;
                margin-right: 10px;
                margin-bottom: 10px;
                float:left;
            }
        </style>
        <script>
            window.onload = function ()
            {
                var oul = document.getElementById('ul1');
                var ali = oul.getElementsByTagName('li');
                var arr = [];
                var zindex = 1;
                for(var i = 0; i < ali.length; i++ )
                {
                    arr.push( {left:ali[i].offsetLeft,top:ali[i].offsetTop});
                }

                for(var i = 0; i < ali.length; i++ )
                {
                    ali[i].index = i;
                    ali[i].style.left = arr[i].left + 'px';
                    ali[i].style.top = arr[i].top + 'px';
                    ali[i].style.position = 'absolute';
                    ali[i].style.margin = '0px';

                    ali[i].onmouseover = function ()
                    {
                        this.style.background = 'green';
                        this.style.zIndex = zindex++;
                        
                        startMove (this,
                            {
                                200,
                                height:200,
                                left:arr[this.index].left - 50,
                                top:arr[this.index].top - 50
                            });
                    }
                    ali[i].onmouseout = function ()
                    {
                        startMove (this,
                            {
                                100,
                                height:100,
                                left:arr[this.index].left,
                                top:arr[this.index].top
                                
                            });
                    }
                }

                
                function startMove(obj, json, fn) {
                    clearInterval(obj.iTimer);
                    var iCur = 0;
                    var iSpeed = 0;
                        
                    obj.iTimer = setInterval(function() {
                        
                        var iBtn = true;
                                    
                        for ( var attr in json ) {
                                            
                            var iTarget = json[attr];
                            
                            if (attr == 'opacity') {
                                iCur = Math.round(css( obj, 'opacity' ) * 100);
                            } else {
                                iCur = parseInt(css(obj, attr));
                            }
                            
                            iSpeed = ( iTarget - iCur ) / 8;
                            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                            
                            if (iCur != iTarget) {
                                iBtn = false;
                                if (attr == 'opacity') {
                                    obj.style.opacity = (iCur + iSpeed) / 100;
                                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                                } else {
                                    obj.style[attr] = iCur + iSpeed + 'px';
                                }
                            }
                            
                        }
                        
                        if (iBtn) {
                            clearInterval(obj.iTimer);
                            fn && fn.call(obj);
                        }
                        
                    }, 30);
                }

                function css(obj,attr)
                {
                    if(obj.currentStyle)
                        return obj.currentStyle[attr];
                    else
                        return getComputedStyle(obj,false)[attr];
                }
            }
        </script>
    </head>
    <body>
        <ul id = "ul1">    
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>
js运动 九宫格展开

js运动九宫格展开
