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 {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>