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. eShopOnContainers 知多少[12]：Envoy gateways

    1. 引言 在最新的eShopOnContainers 3.0 中Ocelot 网关被Envoy Proxy 替换.下面就来简要带大家了解下Envoy,并尝试梳理下为什么要使用Envoy替代Ocelo ...

  2. PHPStorm注释缩进问题

    以下是让强迫症很难受的注释格式 以下几步即可解决强迫症的烦恼 1.点击File 2.点击setting 3.按照以下几步走 4.按照以下几步走   5.最后效果如下

  3. python GDAL 读写shp文件

    gdal包用于处理栅格数据,ogr用于处理矢量数据. 1 #!C:\Program Files\pythonxy\python\python.exe 2 #-*- coding:gb2312 -*- ...

  4. 【服务总线 Azure Service Bus】ServiceBus 队列中死信(DLQ - Dead Letter Queue)问题

    Azure Service Bus 死信队列产生的原因 服务总线中有几个活动会导致从消息引擎本身将消息推送到 DLQ. 如 超过 MaxDeliveryCount 超过 TimeToLive 处理订阅 ...

  5. shell中将带分隔符的字符串转为数组

    shell中将字符串列表转换成数组,需要将数组用括号来表示,元素用"空格"符号分割开,格式如下: array_name=(value1 ... valuen) 使用内置的分割符IF ...

  6. Linux入门到放弃之一《在VMware虚拟机中安装Linux系统（RedHat）》

    1.启动VMware: 2.新建虚拟机: 3.自定义配置(1安装客户机操作系统点击"稍后安装操作系统"2选择客户机操作系统为Linux,版本为Red Hat Enterprise ...

  7. Docker 也是本地开发的一神器：部署单机版 Pulsar 和集群架构 Redis

    原文链接:Docker 也是本地开发的一神器:部署单机版 Pulsar 和集群架构 Redis 一.前言: 现在互联网的技术架构中,不断出现各种各样的中间件,例如 MQ.Redis.Zookeeper ...

  8. Raft协议备注

    Raft协议 Raft协议基于日志实现了一致性 实现备份的是机制:复制状态机Replicated State Machine,如果两个相同的.确定性的状态机从同一状态开始,以相同顺序输入相同的日志,则 ...

  9. import tensorflow 出现非法指令(核心已转储)

    使用 conda install -c conda-forge tensorflow 或者 conda install -c conda-forge tensorflow-gpu 试下.

  10. 使用 C# 9.0 新语法提升 if 语句美感

    C# 语言一贯秉承简洁优美的宗旨,每次升级都会带来一些语法糖,让我们可以使代码变得更简洁.本文分享两个使用 C# 9.0 提升 if 语句美感的技巧示例. 使用属性模式代替 IsNullOrEmpty ...