首頁 > 開發者 > JavaScript
標籤：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> |
javascript原生百葉窗
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
