一、两列布局 两个需求： （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="100%"> <tr> <td style="200px;background: #ddd;"><br/></td> <td style="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="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; 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; 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; 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="100%"> <tr> <td style="200px;background: #ddd;"><br/></td> <td style="calc(100% - 400px);background: #ddd;"><br/><br/><br/><br/></td> <td style="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{ 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 { 200px; } .middle { margin-left: 10px; margin-right: 10px; 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 { 200px; } .middle { margin-left: 10px; margin-right: 10px; 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; 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 { 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 %; 400px; height: 300px; margin: -150px auto auto - 200px; } (4) #content{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 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{ 1000px; height: 500px; background: gray; text-align: center; } /* 以下方框居中 */ .middleShow{ 200px; height: 100px; display: inline-block; vertical-align: middle; /* 以下文字居中 */ background: gainsboro; margin: 0 auto; line-height: 100px; } .middleHide{ 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; 100%; } .body { height: calc(100% - 60px); background: #D9C666; margin-top: 10px; font-size: 0; } .inline { display: inline-block; } .left { 200px; height: 100%; overflow: auto; background: palevioletred; margin-right: 10px; font-size: 16px; } .right { 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; 100%; } .body { flex: 1; background: #D9C666; font-size: 0; } .inline { display: inline-block; } .left { 200px; height: 100%; overflow: auto; background: rebeccapurple; font-size: 16px; margin-right: 10px; } .right { 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=" 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=" 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; 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; 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 { 100%; height: 100%; } p { 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{ 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; 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; 100%; height: 100%; background: #bbb; } #alert { position: absolute; background: #ddd; margin: auto; 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; 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; 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 { 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; 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>