标签：i++ ble doctype pos 网页 tle order red border
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| .box{ | |
| width:1200px; | |
| height:400px; | |
| border:1px solid black; | |
| position:relative; | |
| overflow:hidden; | |
| } | |
| .son{ | |
| width:700px; | |
| height:400px; | |
| position:absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="son" style=background:red; >1</div> | |
| <div class="son" style=background:pink;>2</div> | |
| <div class="son" style=background:green;>3</div> | |
| <div class="son" style=background:yellow;>4</div> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| var bo=document.querySelector(".box"); /*1.获取大盒*/ | |
| var so=document.querySelectorAll(".son"); /*2.获取所有的子元素*/ | |
| var ow=so[0].offsetWidth; /*子级获取父级的宽度*/ | |
| var ew=(bo.offsetWidth-ow)/(so.length-1); | |
| //父级减去子级的宽度除子集的长度,为什么-1,因为有一个不用4-1;三个位置 | |
| fun1(); | |
| function fun1(){ | |
| for(var i=0; i<so.length;i++){ /*for循环取子元素的长度*/ | |
| so[i].index=i /*取子元素的对应位置的*/ | |
| so[i].style.left=(i>0?ow+(i-1)*ew:0)+"px"; /*如果i>0父级的就执行(i-1)就是他跑的距离*ew距离是0；*/ | |
| so[i].onmouseover=function(){ | |
| fun1() | |
| for(var j=1;j<=this.index;j++) /*j=1,从1开始，这是所有是位置。j++;*/ | |
| so[j].style.left=j*ew+"px"; /*输出网页子元素左边的j*ew*/ | |
| } | |
| } | |
| } | |
| </script> | |
| </html> |
标签：i++ ble doctype pos 网页 tle order red border
原文地址：http://www.cnblogs.com/fengyuzhen/p/7211901.html
