zoukankan      html  css  js  c++  java
  • 运用fancybox弹出div的方式弹出视频界面

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

      首先引入fancybox文件,可以再fancy官网下载,注意图片文件也要放进网页目录。

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

       最后可以自己稍作改动,做到自己想要的效果

  • 相关阅读:
    ROM、RAM、DRAM、SRAM和FLASH的区别
    寄存器读写为什么需要用位操作符
    不同变量存放在什么地方
    C语言中数据类型对变量的作用
    内存寻址、对齐,变量左值和右值
    位、字节、半字、字、内存位宽
    面试题10- II. 青蛙跳台阶问题
    509. 斐波那契数
    面试题10- I. 斐波那契数列
    面试题32
  • 原文地址:https://www.cnblogs.com/walldong/p/5246502.html
Copyright © 2011-2022 走看看