CSS3实现不规则排列lightbox效果.zip资源-CSDN文库

共54个文件

jpg：42个

png：4个

css：4个

版权申诉

jquery插件

jquery特效

CSS3特效

26 浏览量 2023-09-25 14:25:54 上传评论收藏 996KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现不规则排列lightbox效果.zip （54个子文件）

lightbox.js 11KB

modernizr.custom.52731.js 9KB

css

lanrenzhijia.css 3KB

normalize.css 9KB

lanrenzhijia2.css 5KB

lightbox.css 4KB

index.html 7KB

images

prev.png 5KB

loading.gif 9KB

next.png 5KB

paper.jpg 4KB

bg.jpg 16KB

close.png 6KB

scroll.png 1KB

large

2.jpg 44KB

10.jpg 75KB

13.jpg 20KB

14.jpg 16KB

6.jpg 30KB

15.jpg 38KB

16.jpg 30KB

1.jpg 52KB

17.jpg 35KB

12.jpg 29KB

5.jpg 38KB

8.jpg 45KB

20.jpg 38KB

18.jpg 36KB

11.jpg 46KB

19.jpg 37KB

3.jpg 61KB

7.jpg 22KB

9.jpg 44KB

4.jpg 23KB

small

2.jpg 8KB

10.jpg 14KB

13.jpg 7KB

14.jpg 5KB

6.jpg 8KB

15.jpg 9KB

16.jpg 8KB

1.jpg 11KB

17.jpg 9KB

12.jpg 8KB

5.jpg 10KB

8.jpg 10KB

20.jpg 9KB

18.jpg 10KB

11.jpg 10KB

19.jpg 9KB

3.jpg 11KB

7.jpg 6KB

9.jpg 9KB

4.jpg 7KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3实现不规则排列lightbox效果</title> <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css" /> <link rel="stylesheet" type="text/css" href="css/lightbox.css"/> <link rel="stylesheet" type="text/css" href="css/lanrenzhijia2.css" /> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/modernizr.custom.52731.js"></script>  </head> <body> <div class="container"> <section id="main" class="main"> <div class="pb-wrapper pb-wrapper-1"> <div class="pb-scroll"> <ul class="pb-strip"> <li><a href="images/large/1.jpg" rel="lightbox[album1]" title="Spring"><img src="images/small/1.jpg" /></a></li> <li><a href="images/large/2.jpg" rel="lightbox[album1]" title="Sunshine"><img src="images/small/2.jpg" /></a></li> <li><a href="images/large/3.jpg" rel="lightbox[album1]" title="Summer"><img src="images/small/3.jpg" /></a></li> <li><a href="images/large/4.jpg" rel="lightbox[album1]" title="Delicious"><img src="images/small/4.jpg" /></a></li> <li><a href="images/large/5.jpg" rel="lightbox[album1]" title="Softness"><img src="images/small/5.jpg" /></a></li> <li><a href="images/large/6.jpg" rel="lightbox[album1]" title="Bliss"><img src="images/small/6.jpg" /></a></li> <li><a href="images/large/7.jpg" rel="lightbox[album1]" title="Adorable"><img src="images/small/7.jpg" /></a></li> <li><a href="images/large/8.jpg" rel="lightbox[album1]" title="Forever"><img src="images/small/8.jpg" /></a></li> <li><a href="images/large/9.jpg" rel="lightbox[album1]" title="Silence"><img src="images/small/9.jpg" /></a></li> <li><a href="images/large/10.jpg" rel="lightbox[album1]" title="Love"><img src="images/small/10.jpg" /></a></li> </ul> </div> <h3 class="pb-title">You only live once, but if you do it right, once is enough.</h3> </div> <div class="pb-wrapper pb-wrapper-2"> <div class="pb-scroll"> <ul class="pb-strip"> <li><a href="images/large/11.jpg" rel="lightbox[album2]" title="Serenity"><img src="images/small/11.jpg" /></a></li> <li><a href="images/large/12.jpg" rel="lightbox[album2]" title="Color"><img src="images/small/12.jpg" /></a></li> <li><a href="images/large/13.jpg" rel="lightbox[album2]" title="Serendipity"><img src="images/small/13.jpg" /></a></li> <li><a href="images/large/14.jpg" rel="lightbox[album2]" title="Sunshine"><img src="images/small/14.jpg" /></a></li> <li><a href="images/large/15.jpg" rel="lightbox[album2]" title="Love"><img src="images/small/15.jpg" /></a></li> <li><a href="images/large/16.jpg" rel="lightbox[album2]" title="Friendship"><img src="images/small/16.jpg" /></a></li> <li><a href="images/large/17.jpg" rel="lightbox[album2]" title="Spring"><img src="images/small/17.jpg" /></a></li> <li><a href="images/large/18.jpg" rel="lightbox[album2]" title="Future"><img src="images/small/18.jpg" /></a></li> <li><a href="images/large/19.jpg" rel="lightbox[album2]" title="Summer"><img src="images/small/19.jpg" /></a></li> <li><a href="images/large/20.jpg" rel="lightbox[album2]" title="Lightness"><img src="images/small/20.jpg" /></a></li> </ul> </div> <h3 class="pb-title">A good reason, is not necessarily a relevant one.</h3> </div> <div class="pb-wrapper pb-wrapper-3"> <div class="pb-scroll"> <ul class="pb-strip"> <li><a href="images/large/20.jpg" rel="lightbox[album3]" title="Spring"><img src="images/small/20.jpg" /></a></li> <li><a href="images/large/10.jpg" rel="lightbox[album3]" title="Sunshine"><img src="images/small/10.jpg" /></a></li> <li><a href="images/large/9.jpg" rel="lightbox[album3]" title="Summer"><img src="images/small/9.jpg" /></a></li> <li><a href="images/large/19.jpg" rel="lightbox[album3]" title="Delicious"><img src="images/small/19.jpg" /></a></li> <li><a href="images/large/8.jpg" rel="lightbox[album3]" title="Softness"><img src="images/small/8.jpg" /></a></li> <li><a href="images/large/18.jpg" rel="lightbox[album3]" title="Bliss"><img src="images/small/18.jpg" /></a></li> <li><a href="images/large/4.jpg" rel="lightbox[album3]" title="Adorable"><img src="images/small/4.jpg" /></a></li> <li><a href="images/large/6.jpg" rel="lightbox[album3]" title="Forever"><img src="images/small/6.jpg" /></a></li> <li><a href="images/large/7.jpg" rel="lightbox[album3]" title="Silence"><img src="images/small/7.jpg" /></a></li> <li><a href="images/large/11.jpg" rel="lightbox[album3]" title="Love"><img src="images/small/11.jpg" /></a></li> </ul> </div> <h3 class="pb-title">Images © Sherman Geronimo-Tan</h3> </div> <div class="pb-wrapper pb-wrapper-4"> <div class="pb-scroll"> <ul class="pb-strip"> <li><a href="images/large/18.jpg" rel="lightbox[album4]" title="Spring"><img src="images/small/18.jpg" /></a></li> <li><a href="images/large/16.jpg" rel="lightbox[album4]" title="Sunshine"><img src="images/small/16.jpg" /></a></li> <li><a href="images/large/8.jpg" rel="lightbox[album4]" title="Summer"><img src="images/small/8.jpg" /></a></li> <li><a href="images/large/18.jpg" rel="lightbox[album4]" title="Delicious"><img src="images/small/18.jpg" /></a></li> <li><a href="images/large/19.jpg" rel="lightbox[album4]" title="Softness"><img src="images/small/19.jpg" /></a></li> <li><a href="images/large/20.jpg" rel="lightbox[album4]" title="Bliss"><img src="images/small/20.jpg" /></a></li> <li><a href="images/large/1.jpg" rel="lightbox[album4]" title="Adorable"><img src="images/small/1.jpg" /></a></li> <li><a href="images/large/5.jpg" rel="lightbox[album4]" title="Forever"><img src="images/small/5.jpg" /></a></li> <li><a href="images/large/3.jpg" rel="lightbox[album4]" title="Silence"><img src="images/small/3.jpg" /></a></li> <li><a href="images/large/6.jpg" rel="lightbox[album4]" title="Love"><img src="images/small/6.jpg" /></a></li> </ul> </div> <h3 class="pb-title">Happiness is a direction, not a destination.</h3> </div> </section> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/lightbox.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉