特效介绍
jquery+css3图片相册专辑,自动适应屏幕大小。由于使用了css3特效,所以不兼容IE8以下浏览器。
使用方法
第一步、在head区域引入<!--引入开始-->和<!--引入结束-->之间的代码第二步、在html里面引入下面的代码。
<div id = "main-page"> <div id = "example-div"> <div class = "steps-c"> </div> <div class = "steps-c"> </div> <div id = "albums-holder"> <div class = "bold">Space</div> <div class = "albumize" title = "Space"> <a href = "samples/d.jpg" title = "Earth from Space"><img src = "samples/4.jpg"></img></a> <a href = "samples/e.jpg" title = "Surreal Space"><img src = "samples/5.jpg"></img></a> <a href = "samples/f.jpg" title = "Our Galaxy"><img src = "samples/6.jpg" class = "albumize-cover"></img></a> <a href = "samples/g.jpg" title = "Heavenly Space"><img src = "samples/7.jpg"></img></a> </div> <div class = "bold">Night</div> <div class = "albumize" title = "Night"> <a href = "samples/a.jpg" title = "Island Night"><img src = "samples/1.jpg"></img></a> <a href = "samples/b.jpg" title = "Ocean Night"><img src = "samples/2.jpg"></img></a> <a href = "samples/c.jpg" title = "Full Moon Night"><img src = "samples/3.jpg"></img></a> <a href = "samples/h.jpg" title = "Heavenly Night"><img src = "samples/8.jpg" class = "albumize-cover"></img></a> </div> </div> </div> </div>相册专辑图片地址和缩略图地址说明:
<a href = "samples/d.jpg" title = "Earth from Space"> 这里的href所指向的路径为大图地址
<img src = "samples/4.jpg"> 这里的src所指向的图片路径为缩略图路径