超炫的弹出层效果Fancybox

Fancybox具有很强大的功能，它可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。本文讲演示七种弹出层示例。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

首先引入jQuery库和Fancybox插件。

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.fancybox-1.3.1.pack.js"></script>

HTML

我们先演示第一种超炫的弹出层效果，看了以后，其他神马弹出层弱爆了...哈哈...其他强大的Fancybox弹出演示效果DEMO里有，请点击查看演示效果。

<h4>演示1：动态效果</h4>
<p><a id="demo1" href="images/example/b1.jpg" title="Hello,this is a fancybox."><img src="images/example/s1.gif" alt="" /></a></p>

jQuery

最后调用Fancybox插件方法：

$("#demo1").fancybox({
   'transitionIn': 'elastic', //窗口显示的方式
   'transitionOut': 'elastic',
   'titlePosition': 'inside'
});

Fancybox插件参数和方法

参数	描述	默认值
width	设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	560
height	设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	340
cyclic	是否循环显示，当内容为图片集时。	false
centerOnScroll	弹出窗口始终浏览器居中。	false
modal	是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'， 'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为true	false
titlePosition	标题的位置,可以设置为'outside', 'inside' or 'over'	'outside'
transitionIn, transitionOut	窗口显示的方式，可以设置为'elastic', 'fade' or 'none'	'fade'
send	方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });	-
(方法)$.fancybox.showActivity	显示加载动画	-
(方法)$.fancybox.hideActivity	隐藏加载动画	-
(方法)$.fancybox.close	关闭窗口	-
(方法)$.fancybox.resize	自动调整窗口的高度使之与内容相适应	-
(方法)Centered	是否将选区居中，即显示在容器的中心。	-

超炫的弹出层效果Fancybox 收藏

HTML

jQuery

Fancybox插件参数和方法

超炫的弹出层效果Fancybox
收藏