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="data:images/1.jpg" /></li>

19     <li><img src="data:images/2.jpg" /></li>

20     <li><img src="data:images/3.jpg" /></li>

21     <li><img src="data:images/4.jpg" /></li>

22     <li><img src="data:images/5.jpg" /></li>

23     <li><img src="data:images/1.jpg" /></li>

24     <li><img src="data:images/2.jpg" /></li>

25     <li><img src="data:images/3.jpg" /></li>

26     <li><img src="data:images/4.jpg" /></li>

27     <li><img src="data: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="data:images/1.jpg" /></li>

    <li><img src="data:images/2.jpg" /></li>

    <li><img src="data:images/3.jpg" /></li>

    <li><img src="data:images/4.jpg" /></li>

    <li><img src="data:images/5.jpg" /></li>

    <li><img src="data:images/1.jpg" /></li>

    <li><img src="data:images/2.jpg" /></li>

    <li><img src="data:images/3.jpg" /></li>

    <li><img src="data:images/4.jpg" /></li>

    <li><img src="data:images/5.jpg" /></li>

</ul>

</body>

</html>

javascript布局转换的更多相关文章

  1. js 布局转换问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  3. [Js]布局转换

    为什么要布局转换? 要这样的效果,单写css,只要给每个li浮动就行,不需要绝对定位.但是比如做一些效果(如鼠标移入图片变大),就需要改变位置了.直接给每个li在css上定好位置不方便,也不知道有几个 ...

  4. 布局转换：文档流->绝对定位

    布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...

  5. IE JavaScript字符串转换成Date后出现NaN错误

    参考的博文:http://blog.csdn.net/zhu7478848/article/details/53388582 在IE浏览器下, JavaScript字符串转换成Date后会出现NaN错 ...

  6. JavaScript变量转换

    JavaScript变量转换 目录 自动转换 (1)Number与Boolean (2)Number与String (3)String与Boolean (4)null的自动转换 (5)undefine ...

  7. Javascript强制转换

    Javascript强制转换 Javascript强制转换强制转换一共有五种转换方式,各有各的用处,希望大家在实际的使用中灵活运用,不要死板. <!DOCTYPE html> <ht ...

  8. java基础60 JavaScript字符串转换成数字（网页知识）

    1.字符串转换成数字 <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

  9. JavaScript编码转换之gb2312转unicode -- &#X形式

    http://www.cnblogs.com/meil/archive/2007/01/31/635936.html JavaScript编码转换之gb2312转unicode     1. < ...

随机推荐

  1. 栈和堆 - JS

    原始值 - Stack (栈) Number String Boolean undefined null 引用值 - Heap (堆) array object function ...data Re ...

  2. java刷题时常用容器详解

    当初学java时,只是简单的把java基础知识过了一遍就跑去刷题了,很多知识都是在刷题的过程中慢慢加深理解的. 由于每次刷题时,刷到与容器有关的我基本上都跑去百度了,例如百度一下:java中List的 ...

  3. docker gitlab搭建

    1,官方查找gitlab docker镜像 2,pull镜像 3,run docker run -d -p 443:443 -p 10080:80 -p 22:22 --name gitlab --r ...

  4. 扩展中国剩余定理(EXCRT)快速入门

    问题 传送门 看到这个问题感觉很难??? 不用怕,往下看就好啦 假如你不会CRT也没关系 EXCRT大致思路 先考虑将方程组两两联立解开,如先解第一个与第二个,再用第一个与第二个的通解来解第三个... ...

  5. Python爬虫实战详解：爬取图片之家

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 如何使用python去实现一个爬虫? 模拟浏览器请求并获取网站数据在原始数据 ...

  6. uniapp微信小程序获取当前用户手机号码（前端）

    按钮触发获取用户信息 uniapp中与微信小程序官网所写会不同, <button open-type="getPhoneNumber" @getphonenumber=&qu ...

  7. 你说一下对Java中的volatile的理解吧

    前言 volatile相关的知识其实自己一直都是有掌握的,能大概讲出一些知识,例如:它可以保证可见性:禁止指令重排.这两个特性张口就来,但要再往深了问,具体是如何实现这两个特性的,以及在什么场景下使用 ...

  8. CF957E Contact ATC

    二维偏序(逆序对) 因为风速vf,-w<=vf<=w,因此我们可以算出每一艘船到达原点的时间的取值范围 即取vf=w和vf=-w时,记ai为当vf=w时的用时,记bi为当vf=-w时的用时 ...

  9. php ci下添加一个创建常用的模块和控制器方法

    我这么写是非常不好的 ,这些都可以写在lirbraries里面 (ci就是这么干的) 我这里是自己用 大概一个模型 没那么多讲究 现在core/CodeIgniter.php 文件 if($modle ...

  10. thinkphp之无限分类

    namespace Home\Controller; use Home\Controller; class CategoryController extends Controller { //无限分类 ...