首页jquery手风琴案例

jquery手风琴案例

时间: 2023-11-25 19:50:43 浏览: 218

以下是一个简单的jQuery手风琴案例： ```html <!DOCTYPE html> <html> <head> <title>jQuery手风琴案例</title> <style type="text/css"> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 400px; } .box { flex-basis: 200px; height: 200px; margin: 10px; background-color: #ccc; transition: flex-basis 0.5s ease-in-out; } .box:hover { flex-basis: 400px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> ```

阅读全文