运用fancybox弹出div的方式弹出视频界面_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:25:03
原创
1382 人浏览过

fancybox可以弹出很多窗体,甚至一个swf格式的小视频。但这样的swf视频播放的时候并没有任何的控件。只能重头看到尾,或者关闭。我们可以利用fancybox弹出div盒子的方式配合html5很快的写出弹出一个小视频的代码:

首先引入fancybox文件

  <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" / alt="运用fancybox弹出div的方式弹出视频界面_html/css_WEB-ITnose" ></a><!--存放播放的图标,可以是img,button等等--!>                    <div    style="max-width:90%"><!--先让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    })});
登录后复制

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板