| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>横向手风琴</title> | |
| <style> | |
| * {margin: 0;padding: 0;} | |
| .container { | |
| 1000px; | |
| height: 400px; | |
| margin: 0 auto; | |
| margin-top: 120px; | |
| box-shadow: 0 0 4px black; | |
| } | |
| /* 关键点就是将ul设置为弹性盒，然后通过flex-grow来对每个li进行控制 */ | |
| ul { | |
| 100%; | |
| height: 100%; | |
| list-style: none; | |
| display: flex; | |
| } | |
| li { | |
| 70px; | |
| height: 100%; | |
| overflow: hidden; | |
| transition: .5s; | |
| } | |
| .current{ | |
| flex-grow: 10; /* 将当前的li的flex-grow值设置为10 */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <ul> | |
| <li class="current"><img src="./img/1.jpg" alt="" height="400"></li> | |
| <li><img src="./img/2.jpg" alt="" height="400"></li> | |
| <li><img src="./img/3.jpg" alt="" height="400"></li> | |
| <li><img src="./img/4.jpg" alt="" height="400"></li> | |
| <li><img src="./img/5.jpg" alt="" height="400"></li> | |
| </ul> | |
| </div> | |
| <script> | |
| // 获取DOM元素 | |
| let li = document.getElementsByTagName("li"); | |
| let container = document.getElementsByClassName("container")[0]; | |
| let enter = function () { | |
| // 首先使用for循环将所有的li的class值给清空 | |
| for(let i=0;i<li.length;i++) | |
| { | |
| li[i].className = ""; | |
| } | |
| // 然后再将当前的li的class赋值为current | |
| this.className = "current"; | |
| } | |
| // 通过for循环给所有的li添加mouseenter事件 | |
| for (let i = 0; i < li.length; i++) { | |
| li[i].addEventListener("mouseenter", enter, false); | |
| } | |
| </script> | |
| </body> | |
| </html> |