布局的转换（js必备技能）

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

举例：用css的布局，在一个盒子中拍好图片（或内容），鼠标移入则对应内容放大，则会将周围的图片挤出盒子。

解决办法就是一下的布局转换，吧css布局转换为js的布局，止咳意会不可言传

<!doctype html>
<html>
<head>
  <style>
   *{padding:0;margin:0;}
   #ul1{background:yellow;height:500px;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;
   }
  </style>
  <script>

   window.onload=function(){
    var aLi=document.getElementById("ul1").getElementsByTagName("li");
    var min=2;
    for(var i=0;i<aLi.length;i++){
     aLi[i].style.top=aLi[i].offsetTop+"px";
     aLi[i].style.left=aLi[i].offsetLeft+"px";
    }
    for(var i=0;i<aLi.length;i++){
     aLi[i].style.position="absolute";
     aLi[i].style.margin="0";
    }

    for(var i=0;i<aLi.length;i++){

     aLi[i].onmouseover=function(){
      //alert("???");
      this.style.zindex=(min+aLi.length);
      startMove(this,{height:200,width:200});
     }
     aLi[i].onmouseout=function(){
      startMove(this,{height:100,width:100});
      this.style.zindex=1;
     }
    }
   }



   function getStyle(obj, attr){
     if(obj.currentStyle)
     {
      return obj.currentStyle[attr];
     }
     else
     {
      return getComputedStyle(obj, false)[attr];
     }
   }
   function startMove(obj,json,fn){
     clearInterval(obj.timer);
     var iCur=null;
     var iSpeed=0;
     var attr=null;
     var bStop=null;
     obj.timer=setInterval(function(){
      bStop=true;
      for(attr in json){
        if(attr==‘opacity‘){
      iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
        }else{
      iCur=parseInt(getStyle(obj,attr));
        }
        iSpeed=(json[attr]-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(iCur!=json[attr]){
      bStop=false;
        }
        if(attr==‘opacity‘){
      obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
      obj.style.opacity=(iCur+iSpeed)/100;
        }else{
      obj.style[attr]=iCur+iSpeed+‘px‘;
        }
      }
      if(bStop){
       clearInterval(obj.timer);
       if(fn){fn();}
      }
     },30);
   }
  </script>
</head>
<body>
  <ul id="ul1">
   <li style="z-index:1;"></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
</body>
</html>

=====================================================================

完整的代码

<!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>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="move2.js"></script>
<script>
window.onload=function ()
{
var oUl=document.getElementById(‘ul1‘);
var aLi=oUl.getElementsByTagName(‘li‘);
var iMinZindex=2;
var i=0;
//1.布局转换
for(i=0;i<aLi.length;i++)
{
  //aLi[i].innerHTML=‘left:‘+aLi[i].offsetLeft+‘, 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‘;
}
//2.加事件
for(i=0;i<aLi.length;i++)
{
  aLi[i].onmouseover=function ()
  {
   this.style.zIndex=iMinZindex++;
   startMove(this, {width: 200, height: 200, marginLeft: -50, marginTop: -50});
  };
  aLi[i].onmouseout=function ()
  {
   startMove(this, {width: 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>
<li></li>
</ul>
</body>
</html>