7、两列布局、三列布局、五种盒子居中（含vertical-align: middle）、上下两行布局、em与rem、背景撑开盒子、多图片延迟加载、旋转的正方体、

固始县钱成_WEB前端工程
92 阅读4分钟 
一、两列布局
两个需求：
（1）左侧固定宽、右侧占满余屏
（2）两侧自适应高
四个实现：
（1）table
（2）flex
（3）内外补+浮动
（4-1）大高赋给小高+浮动
（4-3）大高赋给小高+定位
1、table。
<!DOCTYPE html>
<html lang="en">
<head>
  <title>两列高度自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <table style="width:100%">
    <tr>
      <td style="width:200px;background: #ddd;"><br/></td>
      <td style="width:calc(100% - 200px);background: #ddd;"><br/><br/><br/><br/></td>
    </tr>
  </table>
  <p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
2、flex。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div style="display:flex">
    <div style="width:200px;background: #ddd;margin-right: 10px;"><br/></div>
    <div style="flex:1;background: #ddd;"><br/><br/><br/><br/><br/></div>
  </div>
</body>
</html>
3、内外补+浮动。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两列高度自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #main {
      overflow: hidden;
    }
    .both {
      background: #ddd;
      padding-bottom: 10000px;
      margin-bottom: -10000px;
    }
    .left {
      float: left;
      width: 200px;
    }
    .right {
      margin-left: 210px;
    }
  </style>
</head>
<body>
  <div id="main">
    <div class="left both"><br/></div>
    <div class="right both"><br/><br/><br/><br/><br/></div>
  </div>
  <p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>

</html>
4-1、大高赋给小高+浮动
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #left {
      float: left;
      width: 200px;
      background: #ddd;
    }
    #right {
      margin-left: 210px;
      background: #ddd;
    }
  </style>
</head>
<body>
  <div>
    <div id="left"><br/><br/><br/></div>
    <div id="right"><br/><br/><br/><br/><br/><br/><br/></div>
  </div>
  <p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
<script type="text/javascript">
  var left = document.getElementById("left");
  var right = document.getElementById("right");
  var leftHeight = parseFloat(getComputedStyle(left).height);
  var rightHeight = parseFloat(getComputedStyle(right).height);
  var distanceHeight = leftHeight - rightHeight;
  if (distanceHeight > 0) {
    right.style.height = leftHeight + "px";//right.style.height =rightHeight +distanceHeight+ "px";
    //right.style.height只能赋值，不能获取，所以此处用rightHeight代替right.style.height      
  } else {
    left.style.height = rightHeight + "px";//left.style.height = leftHeight-distanceHeight + "px";
  }
</script>
4-2、大高赋给小高+定位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右固定宽，中间自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .left {
      top: 0;
      left: 0;
      position: absolute;
      width: 200px;
      background: #ddd;
    }
    .right {
      top: 0;
      left: 210px;
      right: 0;
      position: absolute;
      background: #ddd;
    }
  </style>
</head>
<body>
  <div id="left" class="left"><br /><br /><br /><br /><br /><br /></div>
  <div id="right" class="right"><br /></div>
</body>
</html>
<script type="text/javascript">
  var left = document.getElementById("left");
  var right = document.getElementById("right");
  var leftHeight = parseFloat(getComputedStyle(left).height);
  var rightHeight = parseFloat(getComputedStyle(right).height);
  var distanceHeight = leftHeight - rightHeight;
  if (distanceHeight > 0) {
    right.style.height = leftHeight + "px";//right.style.height =rightHeight +distanceHeight+ "px";
    //right.style.height只能赋值，不能获取，所以此处用rightHeight代替right.style.height      
  } else {
    left.style.height = rightHeight + "px";//left.style.height = leftHeight-distanceHeight + "px";
  }
</script>
5、jQuery实现多div等高(与方案4相似)
$(function() {
  var maxHeight = 0;
  //以下求最高的div的高度
  $(".height").each(function() {
    var thisHeight = $(this).innerHeight();
    maxHeight = thisHeight > maxHeight ? thisHeight : maxHeight;
  })
  //以下将最高的div的高度赋值给每一个(需要与最高div等高的)div，
  $(".height").each(function() {
    var thisPadding = $(this).innerHeight() - $(this).height();
    //在jQuery中，innerheight=padding+内容height
    $(this).height(maxHeight - thisPadding);
  })
}) 
二、三列布局
两个需求：
（1）左右两侧固定宽、中间占满余屏
（2）左中右自适应高
四个实现：
（1）table
（2）flex
（3）内外补+浮动
（4-1）大高赋给小高+浮动
（4-2）大高赋给小高+定位
1、table。
<!DOCTYPE html>
<html lang="en">
<head>
  <title>两列高度自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<table style="width:100%">   
  <tr>
    <td style="width:200px;background: #ddd;"><br/></td>
    <td style="width:calc(100% - 400px);background: #ddd;"><br/><br/><br/><br/></td>
    <td style="width:200px;background: #ddd;"><br/></td>
  </tr>
</table>
<p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
2、flex。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右固定宽，中间自适应</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .flex {
      display: flex;
    }
    .leftAndRight{
      width: 200px;
      background: #ddd;
    }
    .middle{
      flex: 1;
      margin:0 10px;
      background: #ddd;
    }
  </style>
</head>
<body>
<div class="flex">
  <div class="leftAndRight"><br/></div>
  <div class="middle"><br/><br/><br/><br/></div>
  <div class="leftAndRight"><br/></div>
</div>
</body>
</html>
3、内外补+浮动。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三列高度自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #main {
      overflow: hidden;
    }
    .three{
      background: #ddd;
      padding-bottom: 10000px;
      margin-bottom: -10000px;
      float: left; 
    }
    .leftAndRight {
      width: 200px;
    }
    .middle {
      margin-left: 10px;
      margin-right: 10px;
      width:calc(100% - 420px)
    }
  </style>
</head>
<body>
<div id="main">
  <div class="leftAndRight three"><br/></div>
  <div class="middle three"><br/><br/><br/><br/><br/></div>
  <div class="leftAndRight three"><br/></div>
</div>
<p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
4-1、大高赋给小高+浮动
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三列高度自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .three{
      background: #ddd;
      float: left; 
    }
    .leftAndRight {
      width: 200px;
    }
    .middle {
      margin-left: 10px;
      margin-right: 10px;
      width:calc(100% - 420px)
    }
  </style>
</head>
<body>
<div>
  <div class="leftAndRight three" id="left"><br/></div>
  <div class="middle three" id="middle"><br/><br/><br/><br/><br/></div>
  <div class="leftAndRight three" id="right"><br/></div>
</div>
<p>我是尾部，我是尾部，我是尾部，我是尾部，我是尾部，我是尾部！</p>
</body>
</html>
<script type="text/javascript">
  var left = document.getElementById("left");
  var middle = document.getElementById("middle");
  var right = document.getElementById("right");
  var leftHeight=parseFloat(getComputedStyle(left).height);
  var middleHeight=parseFloat(getComputedStyle(middle).height);
  var rightHeight=parseFloat(getComputedStyle(right).height);
  var maxHeight=0;
  if(leftHeight-middleHeight>0){
      maxHeight= leftHeight;
  }else{
      maxHeight= middleHeight;
  }
  if(rightHeight-maxHeight>0){
      maxHeight= rightHeight;
  }
  left.style.height =maxHeight+ "px";
  middle.style.height =maxHeight+ "px";
  right.style.height =maxHeight+ "px"; 
</script>
4-2、大高赋给小高+定位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左右固定宽，中间自适应</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .leftAndRight {
      top: 0;
      width: 200px;
      position: absolute;
      background: #ddd;
    }
    .left {
      left: 0;
    }
    .right {
      right: 0;
    }
    .middle {
      top: 0;
      left: 210px;
      right: 210px;
      background: #ddd;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="left" class="left leftAndRight"><br/><br/></div>
  <div id="middle" class="middle"><br/><br/><br/><br/><br/><br/></div>
  <div id="right" class="right leftAndRight"><br/></div>
</body>
</html>
<script type="text/javascript">
  var left = document.getElementById("left");
  var middle = document.getElementById("middle");
  var right = document.getElementById("right");
  var leftHeight=parseFloat(getComputedStyle(left).height);
  var middleHeight=parseFloat(getComputedStyle(middle).height);
  var rightHeight=parseFloat(getComputedStyle(right).height);
  var maxHeight=0;
  if(leftHeight-middleHeight>0){
    maxHeight= leftHeight;
  }else{
    maxHeight= middleHeight;
  }
  if(rightHeight-maxHeight>0){
    maxHeight= rightHeight;
  }
  left.style.height =maxHeight+ "px";
  middle.style.height =maxHeight+ "px";
  right.style.height =maxHeight+ "px";
  console.log(maxHeight)  
</script>
 
三、五种盒子居中
<div id="mask">
  <div id="content"></div>
</div>
//1、遮罩
#mask {
  width: 100 %;
  height: 100 %;
  position: fixed;
  left: 0;
  top: 0;
}
//2、内容
(1)#content为空，#mask另加
{
  display: flex;
  justify-content: center;
  align-items: center;
}
(2)
#content{
  position: fixed;
  left: 50 %;
  top: 50 %;
  transform: translate(-50 %, -50 %);
}
(3)
#content{
  position: fixed;
  top: 50 %;
  left: 50 %;
  width: 400px;
  height: 300px;
  margin: -150px auto auto - 200px;
}
(4)
#content{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 300px;
}
(5)
#content{
  position: fixed;
}
<script>
  var oDiv = document.getElementById('content');
  var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  oDiv.style.left = (clientWidth - oDiv.clientWidth) / 2 + 'px';
  oDiv.style.top = (clientHeight - oDiv.clientHeight) / 2 + 'px';
</script>
附：无定位居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS无定位居中</title>
    <style>
        .outer{
            width: 1000px;
            height: 500px;
            background: gray;
            text-align: center;
        }
        /* 以下方框居中 */
        .middleShow{
            width: 200px;
            height: 100px;
            display: inline-block;
            vertical-align: middle;
            /* 以下文字居中 */
            background: gainsboro;
            margin: 0 auto;
            line-height: 100px;
        }
        .middleHide{
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
  <div class="outer">
    <div class="middleShow">无定位居中</div>
    <div class="middleHide"></div>
  </div>
</body>
</html>
 
四、上下两行布局，正好占满全屏
1、用calc。内容超长，会出现滚动条，不会超屏。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        .nav {
            height: 50px;
            background: #BBE8F2;
            width: 100%;
        }

        .body {
            height: calc(100% - 60px);
            background: #D9C666;
            margin-top: 10px;
            font-size: 0;
        }

        .inline {
            display: inline-block;
        }

        .left {
            width: 200px;
            height: 100%;
            overflow: auto;
            background: palevioletred;
            margin-right: 10px;
            font-size: 16px;
        }

        .right {
            width: calc(100% - 210px);
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<div class="body">
    <div class="inline left">
    </div>
    <div class="inline right">
    </div>
</div>
</body>
</html>
2、用flex。内容超长，不会出现滚动条，会超屏。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        .full {
            display: flex;
            flex-direction: column;
        }

        .nav {
            height: 50px;
            background: #BBE8F2;
            width: 100%;
        }

        .body {
            flex: 1;
            background: #D9C666;
            font-size: 0;
        }

        .inline {
            display: inline-block;
        }

        .left {
            width: 200px;
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
            margin-right: 10px;
        }

        .right {
            width: calc(100% - 210px);
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
        }
    </style>
</head>
<body class="full">
<div class="nav"></div>
<div class="body">
    <div class="inline left">
    </div>
    <div class="inline right">
    </div>
</div>
</body>
</html>
3、上下两行布局，总高度不变，此增彼减
（1）用flex。内容超长，不会出现滚动条，会超屏。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .full {
            height: 600px;
            background: red;
            display: flex;
            flex-direction: column;
        }
        .up {
            background: blue;
        }
        .down {
            background: green;
            flex: 1; /*height:100%;*/ 
        }
    </style>
</head>
<body>
<div class="full">
    <div class="up">
        <p>ABCD</p>
    </div>
    <div class="down">
        <p>DCBA</p>
    </div>
</div>
</body>
</html>
五、em与rem
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em与rem</title>
</head>
<body>
<div style="font-size: 50px">
    <div style="width: 20em;height:4em;background: red;border:1px solid green;border-radius:10px;font-family:'楷体';">
            用em做单位的都是相对于父级字体大小的，本例父级字体的大小是50px，所以这里的宽20em就是1000px,高4em就是200px!
    </div>
</div>
<br/>
<br/>
<div style="font-size: 33px">
    <div style="width: 1000px;height:200px;background: red;border:1px solid green;border-radius:10px;font-family:'楷体';">
            根字体的大小即1rem，用rem做单位的都是相对于根字体大小的。下面把1rem定义为：(屏幕宽度/设计稿的宽度)*100+"px"。
        document.documentElement.style.fontSize=<br/>document.documentElement.clientWidth/750*100+"px";
    </div>
</div>
</body>
</html>
 
六、背景撑开盒子
1、描述：
盒子里只放一张图片，盒子的宽度固定，盒子的高度由图片决定，图片铺满盒子且不变形、不裁切、不重复。
2、伪类问题：
div:before,在div元素内部的开始增加一个元素
div:after,在div元素内部的结束增加一个元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .outer {
      border:10px green dashed;
      width: 900px; /*盒子的宽度固定，也可以是百分比,比如80%*/
      margin: 0 auto;
      background:100% no-repeat url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg);
    }
    .outer:after {/*也可以是.outer:before */
      content: ""; /*padding-top已经占据了整个盒子的高度，所以这里不能有任何内容，否则内容会下移到盒子外下方*/
      display: block;
      padding-top: 66.67%; /*66.67%=图片的高/宽；盒子的高度由图片决定,也可以是padding-bottom: 66.67%; */
    }
  </style>
</head>
<body>
<div class="outer"></div>
</body>
</html>

七、多图片延迟加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  img {
    border: none;
  }
  div {
    margin: 0 auto;
    width: 800px;
    height: 400px;
    background: url("http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg") no-repeat center #e1e1e1;
  }
  div img {
    width: 100%;
    height: 100%;
  }
  p {
    width: 800px;
    height: 600px;
    line-height: 60px;
    background: lightgrey;
    font-size: 30px;
    margin: 0 auto;
    text-indent: 13px;
  }
</style>
</head>
<body>
  <p>
    <span>多图片延迟加载：</span><br />
    <span>（1）多图片延迟加载;</span><br />
    <span>（2）多图片延迟加载;</span><br />
    <span>（3）多图片延迟加载。</span>
  </p>
</body>
<script>
var data = [
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
  {
    src:
      "http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg",
  },
];
var aDiv = document.getElementsByTagName("div");
var aImg = document.getElementsByTagName("img");
function bind() {
  var frg = document.createDocumentFragment();
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    div.innerHTML = "<img realImg='" + data[i].src + "' alt=''/>";
    frg.appendChild(div);
  }
  document.body.appendChild(frg);
  frg = null;
}
bind();
window.onscroll = function () {
  var scrollBottom =
    document.documentElement.scrollTop + document.documentElement.clientHeight;
  for (var i = 0; i < aDiv.length; i++) {
    var thisImg = aImg[i];
    var thisDiv = aDiv[i];
    var imgPosition = thisDiv.offsetTop + thisDiv.offsetHeight;
    if (imgPosition - 200 < scrollBottom) {
      if (thisImg.isLoad) continue;
      thisImg.src = thisImg.getAttribute("realImg");
      thisImg.isLoad = true;
    }
  }
};
</script>
</html>
 

八、旋转的正方体
实现思路：（1）把6个正方形通过定位叠放在一起；（2）1个不动，4个旋转90度与前者垂直，形成1个无盖盒子，最后1个通过平移作为盒盖！（3）添加CSS3动画，实现旋转。
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转的正方体</title>
  <style type="text/css">
    *{
      margin: 0;
      padding:0
    }
    .wrap{
      perspective:2000px;
    }
    .wrap ul{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      position: relative;
      animation: move 5s infinite;
      transform-style: preserve-3d;
      transform-origin: 100px 100px -100px;
    }
    .wrap ul li{
      left: 0;
      top: 0;
      width: 196px;
      height: 196px;
      color: #fff;
      font-size: 60px;
      list-style: none;
      text-align: center;
      line-height: 196px;
      position: absolute;
      border:2px solid #000;
      background: rgba(000,000,000,0.5);

    }
    .wrap ul li:nth-child(1){
      transform-origin: top;
      transform: rotateX(-90deg);
    }
    .wrap ul li:nth-child(2){
      transform-origin: bottom;
      transform: rotateX(90deg);
    }
    .wrap ul li:nth-child(3){
      transform-origin: left;
      transform: rotateY(90deg);
    }
    .wrap ul li:nth-child(4){
      transform-origin: right;
      transform: rotateY(-90deg);
    }
    .wrap ul li:nth-child(5){
      transform: translateZ(-200px);
    }
    .wrap ul li:nth-child(6){
      transform:translateZ(0px);
    }
    @keyframes move {
      0%{
          transform: rotateX(0deg) rotateY(0deg);
      }
      100%{
          transform: rotateX(360deg) rotateY(360deg);
      }
    }
  </style>
</head>
<body>
<div class="wrap">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</div>
</body>
</html>
 
九、可拖拽和缩放弹窗
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可拖拽、缩放弹窗</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      height: 100%;
    }

    .mask {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #bbb;
    }

    #alert {
      position: absolute;
      background: #ddd;
      margin: auto;
      width: 600px;
      height: 800px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      user-select: none;
      resize: both;
      overflow: auto;
    }

    .innerBox {
      padding: 0 30px;
    }

    p {
      line-height: 40px;
    }

    .title {
      height: 50px;
      line-height: 50px;
      background: gray;
      padding-left: 30px;
      cursor: pointer;
    }
    .submit{
      text-align: center;
      background: gray;
      display: block;
      margin: 0 auto;
      width:100px;
      height:30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div class="mask">
    <div id="alert">
      <p id="alert-title-id" class="title"> 本弹窗特征（鼠标置于此处，方可拖动）： </p>
      <div class="innerBox">
        <p> 1、标题区可拖拽 </p>
        <p> 2、内容区可以是任意高度、宽度 </p>
        <p> 3、初始位置居中，由下面css决定 </p>
        <div style="padding-left:30px;">
          <p> left: 50%; </p>
          <p> top: 50%;</p>
          <p> transform: translate(-50%, -50%);</p>
        </div>
        <p> 4、弹窗可缩放，由下面css决定 </p>
        <div style="padding-left:30px;">
          <p> resize: both; </p>
          <p> overflow: auto;</p>
        </div>
        <p> 5、提交按钮和文字居中，由下面css决定 </p>
        <div style="padding-left:30px;">
          <p> text-align:center; width:100px; background:gray;</p>
          <p> display:block; height:30px; line-height:30px; margin:0 auto;</p>
        </div>
        <p> 6、你使用时，在关闭弹窗之前，用上面3处css代码重置弹窗的位置，否则，下次使用弹窗时，弹窗将出现在上次关闭时的地方。 </p>
        <p> 7、弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。 </p>
        <p> 8、拖拽弹窗的右下方，可以实现缩放。 </p>
      </div>
      <div style="padding-top:30px;">
        <span class="submit">提交</span>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  var oDiv = document.getElementById("alert");
  oDiv.onmousedown = down;
  function processThis(fn, currentThis) {
    return function (event) {
      fn.call(currentThis, event); //”先触发，后执行“与”先执行，后触发“
    };
  }
  function down(event) {
    event = event || window.event;
    if (event.target.id != "alert-title-id") return;
    this.initOffsetLeft = this.offsetLeft;
    this.initOffsetTop = this.offsetTop;
    this.initClientX = event.clientX;
    this.initClientY = event.clientY;
    this.maxOffsetWidth =
      (document.documentElement.clientWidth || document.body.clientWidth) -
      this.offsetWidth;
    this.maxOffsetHeight =
      (document.documentElement.clientHeight || document.body.clientHeight) -
      this.offsetHeight;
    if (this.setCapture) {
      this.setCapture();
      this.onmousemove = processThis(move, this);
      this.onmouseup = processThis(up, this);
    } else {
      document.onmousemove = processThis(move, this);
      document.onmouseup = processThis(up, this);
    }
  }
  function move(event) {
    var currentLeft = this.initOffsetLeft + (event.clientX - this.initClientX);
    var currentTop = this.initOffsetTop + (event.clientY - this.initClientY);

    //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。
    if (currentLeft > this.maxOffsetWidth + this.clientWidth / 0.8) {
      currentLeft = this.maxOffsetWidth + this.clientWidth / 0.8;
    } else if (currentLeft < -this.clientWidth / 4) {
      currentLeft = -this.clientWidth / 4;
    }
    if (currentTop > this.maxOffsetHeight + this.clientHeight / 0.8) {
      currentTop = this.maxOffsetHeight + this.clientHeight / 0.8;
    } else if (currentTop < 300) {
      //-this.clientHeight / 4
      currentTop = 300; //-this.clientHeight / 4
    }
    //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。

    //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失1/2时，停止移动。
    /* if (currentLeft > this.maxOffsetWidth + this.clientWidth) {
              currentLeft = this.maxOffsetWidth + this.clientWidth;
          } else if (currentLeft < -this.clientWidth / 64) {
              currentLeft = -this.clientWidth / 64;
          }
          if (currentTop > this.maxOffsetHeight + this.clientHeight) {
              currentTop = this.maxOffsetHeight + this.clientHeight;
          } else if (currentTop < -this.clientHeight / 64) {
              currentTop = -this.clientHeight / 64;
          } */
    //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失1/2时，停止移动。

    //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，触边时，停止移动。
    /* if (currentLeft > this.maxOffsetWidth + this.clientWidth / 2) {
              currentLeft = this.maxOffsetWidth + this.clientWidth / 2;
          } else if (currentLeft < this.clientWidth / 2) {
              currentLeft = this.clientWidth / 2;
          }
          if (currentTop > this.maxOffsetHeight + this.clientHeight / 2) {
              currentTop = this.maxOffsetHeight + this.clientHeight / 2;
          } else if (currentTop < this.clientHeight / 2) {
              currentTop = this.clientHeight / 2;
          } */
    //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，触边时，停止移动。

    this.style.left = currentLeft + "px";
    this.style.top = currentTop + "px";
    console.log(this.style.left);
    console.log(this.style.top);
  }
  function up() {
    if (this.releaseCapture) {
      this.releaseCapture();
      this.onmousemove = null;
      this.onmouseup = null;
    } else {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
</script>
　　
　　
十、表格排序 
这里的表格排序，包含按姓名、年龄、分数、性别等汉字和数字的排序。用纯原生JavaScript代码实现，同时还实现了隔行变色。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #table {
      width: 600px;
      border: 3px solid darkgreen;
      margin: 20px auto;
      text-align: center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      -ms-user-select: none;
    }
    #table tr {
      height: 40px;
      line-height: 40px;
    }
    .bg0 {
      background: mediumvioletred;
    }
    .bg1 {
      background: greenyellow;
    }
    .bg2 {
      background: yellow;
    }
  </style>
</head>
<body>
  <table id="table" class="table">
    <thead>
      <tr class="bg2">
        <th class="cursor">姓名</th>
        <th class="cursor">年龄</th>
        <th class="cursor">分数</th>
        <th class="cursor">性别</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    var table = document.getElementById("table");
    var th = table.tHead.rows[0].cells;
    var body = table.tBodies[0];
    var row = body.rows;
    console.log(row); //结果不是空数组，原因是：后面的JS多次操作了DOM元素，表格进行了多次更新，控制台也进行了多次的更新，这个结果是控制台最后一次更新的结果。如果想摆脱后面代码对它的影响，有两个方法：（1）将后面的代码都删掉（2）在此处加上debugger，运行本网页，再在浏览器上刷新本网页。
    var data = [
      { name: "赵老大", age: 45, score: 60, sex: 0 },
      { name: "钱老二", age: 24, score: 67, sex: 1 },
      { name: "孙老三", age: 38, score: 79, sex: 1 },
      { name: "李老四", age: 30, score: 80, sex: 0 },
      { name: "周老五", age: 65, score: 56, sex: 1 },
      { name: "吴老六", age: 26, score: 26, sex: 0 },
    ];
    //绑定原始数据
    bind();
    function bind() {
      var frg = document.createDocumentFragment();
      for (var i = 0; i < data.length; i++) {
        var cur = data[i];
        var tr = document.createElement("tr");
        for (var attr in cur) {
          if (attr === "sex") {
            cur[attr] = cur[attr] === 0 ? "男" : "女";
          }
          var td = document.createElement("td");
          td.innerHTML = cur[attr];
          tr.appendChild(td);
        }
        frg.appendChild(tr);
      }
      body.appendChild(frg); //2、
      frg = null;
    }
    //实现隔行变色
    changeColor();
    function changeColor() {
      for (var i = 0; i < row.length; i++) {
        row[i].className = "bg" + (i % 2);
      }
    }
    //绑定点击事件
    for (var i = 0; i < th.length; i++) {
      if (th[i].className === "cursor") {
        th[i].flag = -1;
        th[i].index = i;
        th[i].onclick = function () {
          sortArray.call(this, this.index);
        };
      }
    }
    //类数组转化为数组
    function makeArray(arg) {
      var ary = [];
      try {
        ary = Array.prototype.slice.call(arg);
      } catch (e) {
        for (var i = 0; i < arg.length; i++) {
          ary.push(arg[i]);
        }
      }
      return ary;
    }
    //点击事件中的排序
    function sortArray(n) {
      var that = this;
      for (var i = 0; i < th.length; i++) {
        th[i].flag = i === n ? (that.flag *= -1) : -1;
      }
      var ary = makeArray(row);
      ary.sort(function (rowBefore, rowBehind) {
        //两个参数(或参数内部的构成部分)，return(前-后)为升序，return(前-后)*(-1)为降序。
        var rowInnerBefore = rowBefore.cells[n].innerHTML;
        var rowInnerBehind = rowBehind.cells[n].innerHTML;
        if (isNaN(rowInnerBefore) && isNaN(rowInnerBehind)) {
          return rowInnerBefore.localeCompare(rowInnerBehind) * that.flag;
        }
        return (rowInnerBefore - rowInnerBehind) * that.flag;
      });
      var frg = null;
      for (i = 0; i < ary.length; i++) {
        frg = ary[i];
        body.appendChild(frg);
      }
      changeColor();
    }
    //数组sort方法使用示例，如下：
    var startResult = [1, 3, 5, 7, 9, 0, 2, 4, 6, 8].sort(function (
      before,
      behind
    ) {
      return before - behind;
    });
    console.log(startResult);
    
    var lastResult = [9, 7, 5, 3, 1, 8, 6, 4, 2, 0].sort(function (before, behind) {
      return (before - behind) * -1;
    });
    console.log(lastResult);
  </script>
</body>
</html>

十一、页面拖拽
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖拽</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    div{
      position: absolute;
      left:0;
      top:0;
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>
<body>
<div id="div"></div>
<script>
  var oDiv = document.getElementById("div");
  oDiv.onmousedown = down;
  function processThis(fn, obj) {
    return function (e) {
      fn.call(obj, e);
    };
  }
  function down(event) {
    event = event || window.event;
    this.offsetLeftPass = this.offsetLeft;
    this.offsetTopPass = this.offsetTop;
    this.eventClientX = event.clientX;
    this.eventClientY = event.clientY;
    if (this.setCapture) {
      this.setCapture();
      this.onmousemove = processThis(move, this);
      this.onmouseup = processThis(up, this);
    } else {
      document.onmousemove = processThis(move, this);
      document.onmouseup = processThis(up, this);
    }
  }
  function move(event) {
    event = event || window.event;
    this.style.left =
      this.offsetLeftPass + (event.clientX - this.eventClientX) + "px";
    //this.offsetLeftPass:移动前offsetLeft值；(event.clientX-this.eventClientX)：鼠标横向移动的距离，即盒子横向移动的距离
    this.style.top =
      this.offsetTopPass + (event.clientY - this.eventClientY) + "px";
    //this.offsetTopPass:移动前offsetTop值；(event.clientX-this.eventClientX)：鼠标纵向移动的距离，即盒子纵向移动的距离
  }
  function up() {
    if (this.releaseCapture) {
      this.releaseCapture();
      this.onmousemove = null;
      this.onmouseup = null;
    } else {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
</script>
</body>
</html>
avatar
文章
阅读
粉丝