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. 全网通4G工业路由器模块和串口转网口/4G/有线/WiFi/LTE模块的实现原理

    随着现在信息化的高速发展,网络信息的需求量大增,在移动的4G流量的场合比如汽车上实现WiFi网络覆盖,户外wifi网络覆盖需求下,4G流量已经明显不够用,而网线到达的成本比较大,难以管控.在这市场痛点 ...

  2. CyclicBarrier（循环栅栏）

    CyclicBarrier public class CyclicBarrierDemo { public static void main(String[] args) { CyclicBarrie ...

  3. Distcp 跨集群同步

    date: 2020-10-09 17:45:00 updated: 2020-10-10 17:45:00 Distcp 跨集群同步 1. 使用方法及原理 hadoop distcp srcPath ...

  4. Redis分布式锁及分区

    以下内容是翻译的官网文档RedLock和分区部分,可以简单了解分布式锁在redis如何实现及其方式 redis分区的方法 redis实现的分布式锁RedLock算法,分布式锁,即在多个master上获 ...

  5. python引用方法赋值问题探究

    python脚本编写中,经常会遇到引用一个模块的方法的场景.引用的方法里到底赋不赋值曾经困扰了我好久. 最近利用python写了一个接口自动化测试脚本,在查阅观看多篇博文和视频后解决了封装方法引用的问 ...

  6. STM32入门系列-STM32最小系统介绍

    STM32最小系统组成 单片机最小系统,也就是能够使得单片机正常运行程序,最少需要连接哪些器件.一般来说,STM32最小系统由四部分组成: 电源电路 复位电路 晶振电路 下载电路 STM32单片机由A ...

  7. PHP百度地图开发之距离计算的实例分享

    /** * 计算两个坐标之间的距离(米) * @param float $fP1Lat 起点(纬度) * @param float $fP1Lon 起点(经度) * @param float $fP2 ...

  8. 痞子衡嵌入式：基于恩智浦i.MXRT1060的MP4视频播放器(RT-Mp4Player)设计

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是基于i.MXRT1062的MP4播放器参考设计. i.MXRT1062是恩智浦i.MXRT四位数系列的中端型号,外设搭配上很均衡,辅以6 ...

  9. 电脑查看当前自己的wifi密码

    菜单+R 输入control  点击确认.

  10. Azure DevOps 扩展之 Hub 插件的菜单权限控制配置

    这是 Hub 插件的描述配置代码片段: { "contributions": [ { "id": "feature-hidden-fields-man ...