欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

FacyBox弹出层效果

来源:     2013年07月02日17:02
字号:T|T

FacyBox是一款基于jquery的lightbox控件,它可以让你在你的网站上展示图片(可以浏览多张图片,支持键盘方向键)、Div或通过Ajax加载的内容,而且使用非常简单。

查看演示DEMO 下载源码

一起来看看如何使用。

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,这个插件非常强大,我会在后面的博文中提到,敬请关注。

]}
客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心