fancybox是一款基于jquery开发的插件

fancybox特点：

1.可以支持图片、html、flash动画、iframe、ajax；

2.可以自定义播放器的css样式；

3.可以以组的形式播放；

4.如果将鼠标滚动插件包含进来的话还能支持鼠标滚动来翻阅图片；

5.fancybox播放器支持投影，更有立体的感觉；

fancybox可以弹出很多窗体，甚至一个swf格式的小视频。但这样的swf视频播放的时候并没有任何的控件。只能重头看到尾，或者关闭。我们可以利用fancybox弹出div盒子的方式配合html5很快的写出弹出一个小视频的代码。首先，效果如下图所示。点击播放的图片，弹出播放视频。背景自动虚化。

好了，废话不多，下面请看具体事例

第一步，首先要把该引用的js,css引用进来（可去官网自行下载）

<link rel=”stylesheet” type=”text/css” href=”css/fancybox.css” />
<script type=”text/javascript” src=”js/jquery-1.11.3.js”></script>
<script type=”text/javascript” src=”js/jquery.fancybox-1.3.1.pack.js”></script>
<script type=”text/javascript” src=”js/main.js”></script>
第二步，html部分

<a id=”showdiv1″ href=”#box1″ title=”测试”><img src=”images/play.PNG” /></a><!–存放播放的图标，可以是img，button等等–!>
<div style=”display:none”><!–先让div隐藏–!>
<div id=”box1″>
<video id=”movie” src=”movie/1.MP4″ controls=”controls” preload=”meta”></video>
</div>
</div>
第三步，js部分

$(document).ready(function(){
$(“#showdiv1”).fancybox({
padding:0,
hideOnOverlayClick:false,
fitToView:false,
autoSize:true,
closeClick:true,
openEffect:”none”,
closeEffect:”none”,
“onClosed”:function(){window.document.location.reload(true)},
centerOnScroll:true
})
});
自己可以自行修改css，达到自己想要的效果

附上fancybox参数如下：