javascript布局转换

javascript布局转换是将原有的浮动布局通过JS里面的javascript属性 offsetLeft 和offsetTop默认值来给元素设置绝对定位。

原来的:缺点——我们想给网页中的图片添加拖拽事件我们发现没有定位是无法完成的所有我们必须要用到下面的布局转换

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 * {margin:0; padding:0;}
 6 
 7 #ul1 {660px; position:relative; margin:10px auto;}
 8 #ul1 li {200px; height:150px; float:left; list-style:none; margin:10px;}
 9 </style>
10 <script>
11 </script>
12 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
13 <title>无标题文档</title>
14 </head>
15 
16 <body>
17 <ul id="ul1">
18     <li><img src="images/1.jpg" /></li>
19     <li><img src="images/2.jpg" /></li>
20     <li><img src="images/3.jpg" /></li>
21     <li><img src="images/4.jpg" /></li>
22     <li><img src="images/5.jpg" /></li>
23     <li><img src="images/1.jpg" /></li>
24     <li><img src="images/2.jpg" /></li>
25     <li><img src="images/3.jpg" /></li>
26     <li><img src="images/4.jpg" /></li>
27     <li><img src="images/5.jpg" /></li>
28 </ul>
29 </body>
30 </html>

转换后:转换后通过JS给每个li都给了绝对定位

<!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 {660px; position:relative; margin:10px auto;}
#ul1 li {200px; height:150px; float:left; list-style:none; margin:10px;}
</style>
<script>
window.onload=function(){
    var ul1=document.getElementById('ul1');
    var lis=ul1.getElementsByTagName('li');
    var aPos=[];

    // 通过for循环获取每个li元素的keft和top保存给aPos
    for(i=0;i<lis.length;i++){
        aPos[i]={left:lis[i].offsetLeft,top:lis[i].offsetTop}
    }


    //通过for循环来给元素添加上次保存好的值
    for(i=0;i<lis.length;i++){
        lis[i].style.left=aPos[i].left+'px';
        lis[i].style.top=aPos[i].top+'px';
        lis[i].style.position='absolute';
        lis[i].style.margin='0';
    }

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul id="ul1">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="images/4.jpg" /></li>
    <li><img src="images/5.jpg" /></li>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="images/4.jpg" /></li>
    <li><img src="images/5.jpg" /></li>
</ul>
</body>
</html>