特效介绍
jQuery fancybox弹出层插件，非常漂亮的一款弹出层插件，鼠标移动到图片上，会显示黑色半透明遮罩，遮罩上面会显示图片的详细信息。点击图片，会弹出带关闭按钮和左右组图浏览按钮，可以实现整个页面所有使用了此插件图片的浏览，本插件还集成了一个按钮插件，如果需要的话加入即可，非常方便。本插件兼容IE8+和其他浏览器。
使用方法
1、在您的html页面的head区域引入下面的css文件、jQuery库、fancybox插件。1 | <link rel="stylesheet" href="css/jquery.fancybox.css"> |
2 | <link rel="stylesheet" href="css/style.css"> |
3 | <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> |
4 | <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script> |
5 | <script type="text/javascript" src="js/application.js"></script> |
01 | <!--图片外面包裹一层a，href为图片地址，class为"fancy"--> |
02 | <a href="img/kroko-full.gif" class="fancy" rel='webdesign' title='Admin template for themeforest'> |
03 | <!--图片地址--> |
04 | <img src="img/kroko.gif" alt="Kroko Admin Theme"> |
05 | <!--鼠标移动上去显示的遮罩层--> |
06 | <div class="overlay"> |
07 | <!--图片标题--> |
08 | <div class="title"> |
09 | Kroko Admin Theme |
10 | </div> |
11 | <!--图片描述--> |
12 | <div class="slogan"> |
13 | Themeforest template |
14 | </div> |
15 | </div> |
16 | </a> |
17 | <!--额外的按钮，如果不需要，下面的div可以删除--> |
18 | <div class="details"> |
19 | <a href="###" class="button">Buy me</a> |
20 | </div> |
