本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; } ul,ol{ list-style: none; } .box{ width: 900px; height: 300px; border:1px solid #333; margin:50px auto; position: relative; overflow: hidden; } .box ul li{ position: absolute; width: 560px; height: 300px; top:0px; } .box ul li.no0{ left:0px; } .box ul li.no1{ left:180px; } .box ul li.no2{ left:360px; } .box ul li.no3{ left:540px; } .box ul li.no4{ left:720px; } /*蒙版效果*/ .mask{ position: absolute; width: 560px; height: 300px; top:0; left: 0; background-color: rgba(0,0,0,.5); } </style> </head> <body> <div class="box" id="box"> <ul> <li class="no0"> <div class="mask"></div> <a href=""><img src="/UploadFiles/2021-04-02/0.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。