超炫的弹出层效果Fancybox

来源:https://www.sucaihuo.com/js/45.html 2015-04-11 18:33浏览(6653) 收藏

Fancybox具有很强大的功能,它可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等。本文讲演示七种弹出层示例。
超炫的弹出层效果Fancybox
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 26 积分

首先引入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里有,请点击<a href='http://www.sucaihuo.com/jquery/demo/45/' target='blank'>查看演示效果</a>。

<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弹出层
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2