javascript布局转换
Posted 笑花大王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于javascript布局转换的主要内容，如果未能解决你的问题，请参考以下文章