妙味——布局转换的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
#ul1{
    width: 366px;
    margin: 0 auto;
    position: relative;
}
#ul1 li{
    list-style: none;
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid black;
    float: left;
    margin: 10px;
    z-index: 1;
}
</style>
<script src="http://files.cnblogs.com/baixc/move.js"></script>
<script>
window.onload=function(){
    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var iMinZindex = 2;
    var i = 0;

    //布局转换
    for(i=0;i<aLi.length;i++){
        // aLi[i].innerHTML='left:'+aLi[i].offsetLeft+'<br />top:'+aLi[i].offsetTop;
        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';
    };

    //加事件
    for(i=0;i<aLi.length;i++){
        aLi[i].onmouseover=function(){
            this.style.zIndex=iMinZindex++;
            startMove(this,{200,height:200,marginLeft:-50,marginTop:-50});
        };

        aLi[i].onmouseout=function(){
            startMove(this,{100,height:100,marginLeft:0,marginTop:0});
        };
    };
};
</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>
高否？富否？帅否？否？滚去学习！