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 {width:660px; position:relative; margin:10px auto;}
8 #ul1 li {width: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 {width:660px; position:relative; margin:10px auto;}
#ul1 li {width: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>
时间： 2024-08-08 01:29:14