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. B站：我是程序汪：电话面试（待更新）

    电话面试: 商城: 1.spring bean的生命周期你可以简单描述一下吗? 能记得几个接口名吗? 2.springMVC的处理流程 3.项目出现生产问题,排查日志有什么方法吗,思路,大概说一下 4 ...

  2. SpringBoot连接多数据源（HBASE,KUDU,ORACLE集成和开发库）

    前提:1.连接hadoop需要本地安装 winutils.exe 并在程序指定,不然程序会报错  IOException: HADOOP_HOME or hadoop.home.dir are not ...

  3. Kubernetes 搭建 ES 集群（存储使用 cephfs）

    一.集群规划 使用 cephfs 实现分布式存储和数据持久化 ES 集群的 master 节点至少需要三个,防止脑裂. 由于 master 在配置过程中需要保证主机名固定和唯一,所以搭建 master ...

  4. Go的第一个Hello程序 简简单单 - 快快乐乐

    Go的第一个Hello程序 简简单单 - 快快乐乐 JERRY_Z. ~ 2020 / 10 / 29 转载请注明出处!️ 目录 Go的第一个Hello程序 简简单单 - 快快乐乐 一.Go程序开发基 ...

  5. python框架Django简介与安装

    Django简介 关注公众号"轻松学编程"了解更多. 发布于2005年,最负盛名且成熟的Python网络框架 最初用来制作在线新闻的Web站点 开源Web框架,遵守BSD协议 BS ...

  6. [BZOJ 2287/POJ openjudge1009/Luogu P4141] 消失之物

    题面: 传送门:http://poj.openjudge.cn/practice/1009/ Solution DP+DP 首先,我们可以很轻松地求出所有物品都要的情况下的选择方案数,一个简单的满背包 ...

  7. 数据结构 - 二叉树的遍历（递归VS非递归）

    import java.util.LinkedList; public class BinaryTree { public static void main(String[] args) { int ...

  8. H5--自动刷新

    每30秒中刷新当前html页面: <meta http-equiv="refresh" content="30">

  9. Hadoop调优 | NameNode主备宕机引发的思考

    大家都知道在双十一这些电商大型营销活动期间,电商网站的访问量等是平时的N倍.每当这个时候到来,无论是开发还是运维人员都严阵以待生怕服务出现问题.很不幸,笔者的一个朋友在一家电商公司上班,在双十一时,恰 ...

  10. WSL Ubuntu 18.04 LTS + VS Code

    WSL Ubuntu 18.04 LTS + VS Code ​ WSL(Windows Subsystem for Linux)使得Windows用户能够在Windows系统上使用原生的Linux环 ...