js 布局转换问题

浏览数：23 / 时间：2015年06月09日

<!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">
<head>
    <title>无标题页</title>
    <style type="text/css">
       *
       {
               margin:0px;
               padding:0px;
           } 
      ul
      {
        width:360px;
       
        position:absolute;    
       left:350px;
        top:100px;
        
      }
      ul li 
      {
        list-style:none;
        float:left;    
        margin:10px;
      }
      div
      {
        width:100px;
        height:100px;    
        background:#4AA0EF;
        z-index:1px;
        
      }
    </style> 

    <script src="../ajax/Move.js" type="text/javascript"></script>

    
    <script type="text/javascript">
        window.onload = function(){
            var oUl = document.getElementById("main");
            
            var oLi = oUl.getElementsByTagName("li");
        
            var mixZIndex= 2;
            for(var i=0;i<oLi.length;i++)
            {
                //布局转换 (第一步)
                oLi[i].style.left = oLi[i].offsetLeft+"px";
                oLi[i].style.top = oLi[i].offsetTop +"px";
            }
            
            for(var i=0;i<oLi.length;i++)
            {
                //将li绝对定位 (第二步)
                oLi[i].style.position="absolute";
            }
            
            //备注：
            //第一步与第二步不能写在一个for循环之中
            //不然li不能起到绝对定位作用效果
            
            for(var i=0;i<oLi.length;i++)
            {
                var oDiv = oLi[i].getElementsByTagName("div")[0];
                
                mixZIndex++;
                oDiv.style.zIndex = mixZIndex;
                oDiv.onmouseover = function(){
                    //alert(2);
                    move(this,{height:200,width:200,marginLeft:-50,marginTop:-50});
                };
                
                oDiv.onmouseout = function(){
                    move(this,{height:100,width:100,marginLeft:0,marginTop:0});
                };
                
            }
           
        }
    </script>
</head>

<body>
    <ul id="main">
      <li>
        <div></div>
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
       <li>
        <div></div> 
      </li>
    </ul>
</body>
</html>

move.js

//运动框架
//链式运动
function move(obj,json,fun)
{
    //先关闭定时器
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        
        //是否停止运行
        var isStop = true;
        
        for(var attr in json)
        {
            //1、当前值
            var current = 0;
            //目标值
            var target = json[attr];
            //判断是否是透明度属性
            if(attr=="opacity")
            {
                 current = parseInt(parseFloat(getStyle(obj,attr))*100);
            }
            else
            {
                 current = parseFloat(getStyle(obj,attr));
            }
            
            //2、计算速度
            var speed = (target-current)/6;
            
            //如果速度大于0  向上取整   如果速度小于0 向下取整
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            
            //计算运行结果
            if(attr=="opacity")
            {
                //透明度兼容性
                obj.style.filter="alpha(opacity:"+(current + speed)+")";
                obj.style.opacity = (current + speed)/100;
            }
            else
            {   
                //计算运动结果值
                obj.style[attr] = current + speed +"px";
            }
            //判断是否所有属性都运动完成
            if(current!=target)
            {
                isStop = false;
            }
        }
        
        //3、关闭定时器
        //所有属性运动完成 就闭关定时器
        if(isStop)
        {
            //关闭定时器
            clearInterval(obj.timer);
            //链式运动
            if(fun)
            {
               fun();  
            }
        }
        
    },30);
}

//对象style属性值
function getStyle(obj,attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj,null)[attr];
    }
}