這裡我們使用最簡單和最少的代碼實現。
1、準備圖片
相同尺寸六張
2、詳細代碼如下
手風琴效果的原理是：當滑鼠移入的時候，改變ul下li的寬度，方案簡單可行。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>過渡模組-手風琴效果</title> <style> *{ margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; float: left; border: 1px solid white; box-sizing: border-box; background-color: rebeccapurple; transition: width 1s linear 0s } ul:hover li{ width: 100px; } ul li:hover{ width: 460px; } </style></head><body><ul> <li><img src="images/ad1.jpg" alt=""></li> <li><img src="images/ad2.jpg" alt=""></li> <li><img src="images/ad3.jpg" alt=""></li> <li><img src="images/ad4.jpg" alt=""></li> <li><img src="images/ad5.jpg" alt=""></li> <li><img src="images/ad6.jpg" alt=""></li></ul></body></html>
PS：自行替換代碼內圖片地址。 3、效果圖
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
