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引數如下：