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. C# 获取页面Post过来的数据

    /// <summary> /// 获取post过来的数据 /// </summary> /// <param name="page">< ...

  2. CentOS 网卡固定地址配置

    修改4个文件后重启网卡 vim /etc/default/grub GRUB_CMDLINE_LINUX="resume=UUID=05dbb36b-dbba-40a3-ba99-1b044 ...

  3. Sentinel流控规则

    流控规则 注:Sentinel的监控页面一开始是没有东西,需要对监控的服务发起请求后才会出现 资源名:唯一名称,默认请求路径 针对来源:Sentinel可以针对调用者进行限流,填写微服务名,指定对哪个 ...

  4. 基于.Net Core开发的物联网平台 IoTSharp V1.5 发布

    很高兴的宣布新版本的发布, 这次更新我们带来了大量新特性, 最值得关注的是, 我们逐步开始支持分布式, 这意味着你可以通过多台服务器共同处理数据, 而不是原来的单机处理, 我们也将遥测数据进行分开存储 ...

  5. Ubuntu 18.04 LTS IP 地址设置

    和之前的版本不太一样, Ubuntu 18.04 的 ip地址设置是用netplan管理的     配置文件在: /etc/netplan/50-cloud-init.yaml 示例文件如下: # T ...

  6. C语言程序设计之 数组2020-10-28

    C语言程序设计之 数组2020-10-28 整理: 第一题:求最小数与第一个数交换 [问题描述] ​ 输入一个正整数n (1<n<=100),再输入n个整数,将最小值与第一个数交换,然后输 ...

  7. android 下的 handler Message

    研究了下android下的 handler  message 实现原理: new handler() 的时候  从ThreadLocal里面 获取当前线程下的 Looper实例下的 MessageQu ...

  8. cenos7 u disk install

    分类:             其他              2014-08-24 13:53     3406人阅读     评论(0)     收藏     举报 CentOS安装教程操作系统 ...

  9. mac下docker安装php链接使用国产数据库驱动

    docker下配置php macos系统无法使用神通数据库,所以使用docker来安装php 第一步先安装php docker search php docker pull php:7.1-fpm d ...

  10. Android基础——项目的文件结构（三）

    Android基础--项目的文件结构(三) 代码源文件夹与资源文件夹 [注]此项目文件结构仅限于Android Studio下的Android项目!!! 在一个Android项目中,代码源文件夹有4个 ...