CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3 Gallery Lightbox

CSS3 Gallery Lightbox



       这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖于css的选择器,以及配合锚点定位来实现。其中很关键一步是HTML的结构,特别是图片的点击播放效果,顺序不能搞错,不然效果无法实现。不过这个效果有一个致命的缺点,那就是对图片的大小有所限制,无法实现图片的自应大小,如果你够有信心的话,可以尝试一下不限制宽度,能否实现这个效果。另外一点,CSS实现的效果,当然没有js实现的效果那么流畅,不过当作挑战性的学习,还是不错的,你不妨一试。

HTML Code:

  1. <a href="#url" class="clickbox"><img src="1.jpg" alt="pic1"><span>Click Here</span></a>
  2. <b class="lightbox">
  3.   <b class="light"></b>
  4.   <b class="box">
  5.     <div id="gallery">
  6.       <div id="fullsize">
  7.         <div id="pic1" class="hz">
  8.           <a class="left" href="#pic10"></a>
  9.           <img src="1.jpg" alt="pic1">
  10.           <a class="right" href="#pic2"></a>
  11.           <p>Some descriptive text</p>
  12.         </div>
  13.         <div id="pic2" class="vt">
  14.           <a class="left" href="#pic1"></a>
  15.           <img src="2.jpg" alt="pic2">
  16.           <a class="right" href="#pic3"></a>
  17.           <p>Some more descriptive text</p>
  18.         </div>
  19.         <div id="pic3" class="vt">
  20.           <a class="left" href="#pic2"></a>
  21.           <img src="3.jpg" alt="pic3">
  22.           <a class="right" href="#pic4"></a>
  23.           <p>Another line of descriptive text</p>
  24.         </div>
  25.         <div id="pic4" class="hz">
  26.           <a class="left" href="#pic3"></a>
  27.           <img src="4.jpg" alt="pic4">
  28.           <a class="right" href="#pic5"></a>
  29.           <p>Some more descriptive text</p>
  30.         </div>
  31.         <div id="pic5" class="vt">
  32.           <a class="left" href="#pic4"></a>
  33.           <img src="5.jpg" alt="pic5">
  34.           <a class="right" href="#pic6"></a>
  35.           <p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p>
  36.         </div>
  37.         <div id="pic6" class="vt">
  38.           <a class="left" href="#pic5"></a>
  39.           <img src="6.jpg" alt="pic7">
  40.           <a class="right" href="#pic7"></a>
  41.           <p>Further descriptive text</p>
  42.         </div>
  43.         <div id="pic7" class="hz">
  44.           <a class="left" href="#pic6"></a>
  45.           <img src="7.jpg" alt="pic7">
  46.           <a class="right" href="#pic8"></a>
  47.           <p>Some more descriptive text</p>
  48.         </div>
  49.         <div id="pic8" class="hz">
  50.           <a class="left" href="#pic7"></a>
  51.           <img src="8.jpg" alt="pic8">
  52.           <a class="right" href="#pic9"></a>
  53.           <p>Yet more descriptive text</p>
  54.         </div>
  55.         <div id="pic9" class="hz">
  56.           <a class="left" href="#pic8"></a>
  57.           <img src="9.jpg" alt="pic9">
  58.           <a class="right" href="#pic10"></a>
  59.           <p>Some more descriptive text</p>
  60.         </div>
  61.         <div id="pic10" class="vt">
  62.           <a class="left" href="#pic9"></a>
  63.           <img src="10.jpg" alt="pic10">
  64.           <a class="right" href="#pic1"></a>
  65.           <p>Some more descriptive text</p>
  66.         </div>
  67.       </div>
  68.     </div>
  69.     <i>CLOSE</i>
  70.   </b>
  71. </b>
复制代码
CSS CODE

  1. body {
  2.   background: url(black-bg.png) repeat 0 0;
  3. }
  4. .clickbox,
  5. .clickbox:visited,
  6. .clickbox:hover {
  7.   text-decoration: none;
  8.   font:bold 20px/40px georgia, sans-serif;
  9.   color: #00c;
  10. }
  11. .clickbox:hover {
  12.   text-decoration: underline;
  13. }

  14. .clickbox img {
  15.   display:block;
  16.   border: 0;
  17. }
  18. .clickbox + b {
  19.   display: block;
  20. }
  21. .clickbox {
  22.   border: 5px solid #fff;
  23.   border-radius: 5px;
  24.   margin: 50px auto;
  25.   background: #fff;
  26.   display: block;
  27.   width: 360px;
  28. }

  29. .clickbox img,
  30. .clickbox span {
  31.   display:block;
  32.   text-align: center;
  33. }

  34. .clickbox + .lightbox {
  35.   position:absolute;
  36.   left:-99999px;
  37.   top:0;
  38.   cursor:default;
  39.   z-index:500;
  40. }


  41. .clickbox + .lightbox .light {
  42.   position:absolute;
  43.   left:0;
  44.   top:0;
  45.   width:100%;
  46. }
  47. .clickbox + .lightbox .box {
  48.   position:absolute;
  49.   left:0;
  50.   width:100%;
  51.   text-align:center;
  52.   height:300px;
  53.   top:20px;
  54. }

  55. .clickbox:active,
  56. .clickbox:focus {
  57.   color:red
  58. }

  59. .clickbox:active + .lightbox {
  60.   left:0;
  61.   width:100%;
  62.   height:100%;
  63. }
  64. .clickbox + .lightbox:hover,
  65. .clickbox:focus + .lightbox {
  66.   position:fixed;
  67.   left:0;
  68.   width:100%;
  69.   height:100%;
  70. }

  71. .clickbox + .lightbox:hover .light,
  72. .clickbox:active + .lightbox .light,
  73. .clickbox:focus + .lightbox .light {
  74.   background:#000;
  75.   width:100%;
  76.   height:100%;
  77.   filter: alpha(opacity=75);
  78.   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
  79.   opacity:0.75;
  80. }

  81. .clickbox + .lightbox i {
  82.   display:block;
  83.   width:100px;
  84.   height:20px;
  85.   position:fixed;
  86.   right:-100px;
  87.   top:0;
  88.   z-index:500;
  89.   color:#000;
  90.   font:normal normal 14px/20px arial, sans-serif;
  91.   text-align:center;
  92.   background:#fff;
  93.   border-radius: 6px;
  94. }

  95. .clickbox + .lightbox:hover i,
  96. .clickbox:active + .lightbox i,
  97. .clickbox:focus + .lightbox i {
  98.   right:50%;
  99.   margin-right:-50px;
  100.   top:5px;
  101. }

  102. .clickbox + .lightbox + #close {
  103.   display:block;
  104.   position:fixed;
  105.   width:100px;
  106.   height:20px;
  107.   overflow:hidden;
  108.   right:-100px;
  109.   top:10px;
  110.   z-index:1000;
  111.   background:url(trans.gif);
  112.   cursor:pointer;
  113. }

  114. .clickbox + .lightbox:hover + #close,
  115. .clickbox:active + .lightbox + #close,
  116. .clickbox:focus + .lightbox + #close {
  117.   right:50%;
  118.   margin-right:-50px;
  119.   top:5px;
  120. }

  121. #gallery {
  122.   display:inline-block;
  123.   position:relative;
  124.   overflow:hidden;
  125. }
  126. #gallery #fullsize {
  127.   width:480px;
  128.   height:480px;
  129.   overflow:scroll;
  130.   overflow-y:hidden;
  131.   margin-bottom:-18px;
  132. }
  133. #gallery #fullsize div {
  134.   width:480px;
  135.   height:480px;
  136.   position:relative;
  137. }
  138. #gallery #fullsize div img {
  139.   display:block;
  140.   margin:0 auto;
  141.   border:0;
  142.   padding:10px 10px 0 10px;
  143.   background:#fff;
  144.   border:1px solid #000;
  145.   border-width:1px 1px 0 1px;
  146. }
  147. #gallery #fullsize div a {
  148.   display:block;
  149.   top:20px;
  150.   position:absolute;
  151.   outline:0;
  152.   z-index:500;
  153.   background:url(trans.gif);
  154. }
  155. #gallery #fullsize div.vt a.left {
  156.   height:360px;
  157.   width:135px;
  158.   position:absolute;
  159.   left:105px;
  160. }
  161. #gallery #fullsize div.vt a.right {
  162.   height:360px;
  163.   width:135px;
  164.   position:absolute;
  165.   left:240px;
  166. }
  167. #gallery #fullsize div.hz a.left {
  168.   height:270px;
  169.   width:180px;
  170.   position:absolute;
  171.   left:60px;
  172. }
  173. #gallery #fullsize div.hz a.right {
  174.   height:270px;
  175.   width:180px;
  176.   position:absolute;
  177.   left:240px;
  178. }

  179. #gallery #fullsize div a.left:hover {
  180.   background:url(prev.png) no-repeat left 20px;
  181. }
  182. #gallery #fullsize div a.right:hover {
  183.   background:url(next.png) no-repeat right 20px;
  184. }

  185. #gallery #fullsize div p {
  186.   background:#fff;
  187.   margin:0 auto;
  188.   padding:10px;
  189.   border:1px solid #000;
  190.   border-width:0 1px 1px 1px;
  191.   font-weight:normal;
  192.   color:#444;
  193. }

  194. #gallery #fullsize div.vt p {
  195.   width:270px;
  196. }
  197. #gallery #fullsize div.hz p {
  198.   width:360px;
  199. }
复制代码
Demo:http://www.w3cplus.com/demo/css3/galleryLightbox/index.html

下载:


【CSS3 Gallery Lightbox】相关文章

1. CSS3 Gallery Lightbox

2. Swipebox:用于触屏设备的精美 jQuery Lightbox 插件

3. FancyBox - 经典的 jQuery Lightbox 插件

4. Swipebox:用于触屏设备的精美 jQuery Lightbox 插件

5. 令人印象深刻的 jQuery 模态框插件 – iLightBox

6. 用于触屏设备的精美 jQuery Lightbox 插件

7. jQuery超酷轻量级响应式lightbox插件

8. 令人印象深刻的 jQuery 模态框插件 – iLightBox

9. 用于触屏设备的精美 jQuery Lightbox 插件

10. 响应式的图片 Lightbox 插件

本文来源:https://www.51html5.com/a899.html

点击展开全部

﹝CSS3 Gallery Lightbox﹞相关内容

「CSS3 Gallery Lightbox」相关专题

其它栏目

也许您还喜欢