jQuery fancybox弹出层——jQuery弹出层插件
- 作者：网页模板
- 大小：0.584MB
- 点击次数：
- 发布时间：2014-06-25 13:16
特效介绍
jQuery fancybox弹出层插件，非常漂亮的一款弹出层插件，鼠标移动到图片上，会显示黑色半透明遮罩，遮罩上面会显示图片的详细信息。点击图片，会弹出带关闭按钮和左右组图浏览按钮，可以实现整个页面所有使用了此插件图片的浏览，本插件还集成了一个按钮插件，如果需要的话加入即可，非常方便。本插件兼容IE8+和其他浏览器。使用方法
1、在您的html页面的head区域引入下面的css文件、jQuery库、fancybox插件。<link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="js/application.js"></script>2、对需要应用此插件的图片进行如下包装：
<!--图片外面包裹一层a，href为图片地址，class为"fancy"-->
<a href="img/kroko-full.gif" class="fancy" rel='webdesign' title='Admin template for themeforest'>
<!--图片地址-->
<img src="img/kroko.gif" alt="Kroko Admin Theme">
<!--鼠标移动上去显示的遮罩层-->
<div class="overlay">
<!--图片标题-->
<div class="title">
Kroko Admin Theme
</div>
<!--图片描述-->
<div class="slogan">
Themeforest template
</div>
</div>
</a>
<!--额外的按钮，如果不需要，下面的div可以删除-->
<div class="details">
<a href="###" class="button">Buy me</a>
</div>
- 本文标签：
- jQuery fancybox弹出层,jQuery弹出层插件
