FacyBox弹出层效果
- 作者:admin
- 发表时间:2013-07-02 14:17:29
- 来源:未知
FacyBox是一款基于jquery的lightbox控件,它可以让你在你的网站上展示图片(可以浏览多张图片,支持键盘方向键)、Div或通过Ajax加载的内容,而且使用非常简单。
一起来看看如何使用。
1、添加javascript引用和css文件的引用
2、HTML
图片:
多张图片浏览:
点击这里
当要浏览多张图片时,只需给链接指定一个ID(如上:id="open"),通过JS单击事件来加载图片源。
DIV:
点击这里
展示DIV时,需要在页面对应一个DIV,并设置id="info",隐藏style="display:none",如下:
点击这里A jQuery-based, which can display images, divs, or entire remote pages.
ajax加载内容
点击这里
3、调用插件
$(function(){ $('a[rel*=facybox]').facybox(); $("#open").click(function(){ //展示多张图片 $.facybox({images:['images/3s.jpg','images/4s.jpg','images/5s.jpg']}); }); });
FacyBox使用简单,能满足网站设计的一般要求,但是如果你想要更丰富的效果,更高层次的要求,可以用到另一个插件:Fancybox,这个插件非常强大,我会在后面的博文中提到,敬请关注。
联系我们
一切良好工作的开始,都需相互之间的沟通搭桥,欢迎咨询。