fancyBox中文文档〔教程).doc

fancyBox 中文文档 fancyBox 为您的网页提供惊艳的缩放功能，同时支持图片、网页内容以及各种多媒体文件。 更新日志 快速入门 常见用法 官方演示 使用许可下载地址 完整API 常见问题 更新日志 重大变更 可扩展的幻灯片导航工具 响应式（调整浏览器窗口大小时自适应窗口大小） 集成幻灯片图片播放功能 新增幻灯片过渡效果 引入CSS3阴影、圆角特效 新的插件选项（与之前版本不兼容） 改用?知识共享署名-非商业性使用3.0?许可协议授权 即将上线 WordPress小插件 重构本站及API文档 完善缩略图浏览工具 fancyBox 手机版（待定） fancyBox 3.0 ↑回顶部 快速入门 1. 下载 fancyBox，解压后根据需要将文件复制到网页文件夹中（建议不要更改目录结构），并在网页源码中引入相应的 css 样式和 js 文件（如果更改了目录结构，引入的时候请调整相应代码，对应它们所在的路径）。注意：别忘了还要先加载 jQuery 库！推荐使用公共库：百度?|?新浪。示例代码： !-- 加载 jQuery 库（必须） --script type=text/javascript src=/jquery-latest.min.js/script !-- 引入 fancyBox 核心文件（必须）--link rel=stylesheet href=/fancybox/source/jquery.fancybox.css?v=2.1.5 type=text/css media=screen /script type=text/javascript src=/fancybox/source/jquery.fancybox.pack.js?v=2.1.5/script !-- 引入 mousewheel 插件（可选，如果想通过鼠标滚轮控制图片播放则必须） --script type=text/javascript src=/fancybox/lib/jquery.mousewheel-3.0.6.pack.js/script !-- 根据需要引入浏览工具：按钮式，缩略图式和/或多媒体工具（可选，详见下方“官方演示”中的“浏览工具”部分） --!-- 按钮式需要引入以下2个文件 --link rel=stylesheet href=/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5 type=text/css media=screen /script type=text/javascript src=/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5/script !-- 缩略图式需要引入以下2个文件 --link rel=stylesheet href=/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7 type=text/css media=screen /script type=text/javascript src=/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7/script !-- 多媒体工具需要引入以下文件 --script type=text/javascript src=/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6/script 2. 给触发 fancyBox 特效的元素（如一张缩略图或“点击我”三个字）加上 a 链接，并将其 href 属性值设置为遮罩层中需要展示的文件的链接（如刚刚那张缩略图的原图的网址）。示例代码： a class=fancybox rel=group href=原图_1.jpgimg src=缩略图_1.jpg alt= //aa class=fancybox rel=group href=原图_2.jpgimg src=缩略图_2.jpg alt= //a 3. 使页面加载完毕时初始化 fancybox() 函数。如果你不懂jQuery但英语还行，请看官方推荐的新手教程。英语不好肿么办？请点右上角的红叉...因为暂时找不到中文版的帮助文档。示例代码： script type=text/javascript $(document).ready(function() { $(.fancybox).fancybox(); });/script 好了，你已经学会使用 fancyBox 了，新技能 Get！ ↑回顶部 常见用法 每一个链接都有