FancyBox 1.3.1 基于jQuery的灯箱效果(Lightbox)图片特效
FancyBox 1.3.1是一款基于jQuery库的Lightbox灯箱效果的图片特效,代码简单易用,效果不错。1.3.1版相比旧版增加了更多的功能。
Various examples (相较旧版增加的功能)
- Inline - auto detect width / height
- Inline - modal window
- Ajax - passing custom data
- Ajax - filtering content
- Iframe (75% width and height)
- Swf
- Example of callbacks
- Non existing image
- Non existing url
Examples of manual call (支持键盘操作)
- Image
- Image gallery
代码使用:
1. 在<head>区加入以下代码
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a#example3").fancybox({//ID选择符,需要跟图片ID保持一致
'titleShow' : false,//是否开启图片标题,参数:true,false
'transitionIn' : 'none',//淡入效果,参数:true,none
'transitionOut' : 'none'//淡出效果,参数:true,none
});
});
</script>
2.在<body>区的代码示例如下:
<a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
更多类型的应用详见压缩包的演示文件。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客

