運用fancybox彈出div的方式彈出視頻界面

時間 2019-12-02

標籤運用 fancybox 彈出 div 方式視頻界面欄目 CSS 简体版

原文原文鏈接

　　fancybox能夠彈出不少窗體，甚至一個swf格式的小視頻。但這樣的swf視頻播放的時候並無任何的控件。只能重頭看到尾，或者關閉。咱們能夠利用fancybox彈出div盒子的方式配合html5很快的寫出彈出一個小視頻的代碼。首先，效果以下圖所示。點擊播放的圖片，彈出播放視頻。背景自動虛化。javascript

　　首先引入fancybox文件，能夠再fancy官網下載，注意圖片文件也要放進網頁目錄。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部分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部分html5

$(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
    })
});