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="data: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
})
});

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

运用fancybox弹出div的方式弹出视频界面的更多相关文章

  1. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  2. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  3. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  4. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  5. 【CefSharp】 禁用右键菜单 与 控制弹出窗口的方式(限版本39.0.0.1)

    这周没什么时间,一开始就在忙一些CefSharp的事情,Win10的研究就放了下来,CefSharp的资料挺少的,但好在是开源的,可以我们便宜的折腾.因为两个的内容都不多,我就合成一篇文章啦. 这还里 ...

  6. 自定义弹出div对话框

    <style type="text/css"> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0 ...

  7. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用js弹出div刷新时闪烁解决方法

    <div style="visibility: hidden"> //弹出div内容 </div>

  9. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

随机推荐

  1. Docker容器学习与分享07

    Docker容器网络 在分享06中学完了bridge网络,接着学习none网络和host网络. Docker在安装时会在host上默认创建三个网络,分别是bridge.host.null. [root ...

  2. skimage 安装和子模块

    平台:Windows 10 1.安装anaconda anaconda是python环境的集成安装软件,建议安装2.7版本的python 2.安装skimage 打开windows的命令提示符:  输 ...

  3. Django商城项目笔记No.2项目准备工作

    Django商城项目笔记No.2项目准备工作 接着上篇开始,创建好工程之后,随之而来的是怎么配置工程,这篇文章记录如何进行相关的配置 1.pycharm打开工程,进行相关的配置 通过pycharm打开 ...

  4. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

  5. sublime text3 当运行报错error时,取消显示路径path的方法

    sublime text3 每当运行报错error时,都会出现一长串的path路径,如何不显示呢? 可以通过注释掉Packages/Default/exec.py的四个特定行来更改. 首先,您需要从P ...

  6. CHECKEDLISTBOX用法总结

    C# CHECKEDLISTBOX用法总结   一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值. 其实这里遍历的只 ...

  7. shiro实战系列(七)之Realm

    Realm 是一个能够访问应用程序特定的安全数据(如用户.角色及权限)的组件.Realm 将应用程序特定的数据转 换成一种 Shiro 能够理解的格式,这样 Shiro 能够提供一个单一的易理解的 S ...

  8. [转]OpenGL进阶(一) - 多视口

    直接给出原文链接:OpenGL进阶(一) - 多视口

  9. IntelliJ IDEA 2018.3发布

    本文转自:https://www.linuxprobe.com/intellij-idea-2018-3-java-12.html

  10. leetcode 217—Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...