运用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="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的方式弹出视频界面的更多相关文章
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
- 【CefSharp】 禁用右键菜单 与 控制弹出窗口的方式(限版本39.0.0.1)
这周没什么时间,一开始就在忙一些CefSharp的事情,Win10的研究就放了下来,CefSharp的资料挺少的,但好在是开源的,可以我们便宜的折腾.因为两个的内容都不多,我就合成一篇文章啦. 这还里 ...
- 自定义弹出div对话框
<style type="text/css"> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0 ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用js弹出div刷新时闪烁解决方法
<div style="visibility: hidden"> //弹出div内容 </div>
- js弹出div层,弹出层页面底部出现UL出现一条线问题
整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...
随机推荐
- Docker容器学习与分享07
Docker容器网络 在分享06中学完了bridge网络,接着学习none网络和host网络. Docker在安装时会在host上默认创建三个网络,分别是bridge.host.null. [root ...
- skimage 安装和子模块
平台:Windows 10 1.安装anaconda anaconda是python环境的集成安装软件,建议安装2.7版本的python 2.安装skimage 打开windows的命令提示符: 输 ...
- Django商城项目笔记No.2项目准备工作
Django商城项目笔记No.2项目准备工作 接着上篇开始,创建好工程之后,随之而来的是怎么配置工程,这篇文章记录如何进行相关的配置 1.pycharm打开工程,进行相关的配置 通过pycharm打开 ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
- sublime text3 当运行报错error时,取消显示路径path的方法
sublime text3 每当运行报错error时,都会出现一长串的path路径,如何不显示呢? 可以通过注释掉Packages/Default/exec.py的四个特定行来更改. 首先,您需要从P ...
- CHECKEDLISTBOX用法总结
C# CHECKEDLISTBOX用法总结 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值. 其实这里遍历的只 ...
- shiro实战系列(七)之Realm
Realm 是一个能够访问应用程序特定的安全数据(如用户.角色及权限)的组件.Realm 将应用程序特定的数据转 换成一种 Shiro 能够理解的格式,这样 Shiro 能够提供一个单一的易理解的 S ...
- [转]OpenGL进阶(一) - 多视口
直接给出原文链接:OpenGL进阶(一) - 多视口
- IntelliJ IDEA 2018.3发布
本文转自:https://www.linuxprobe.com/intellij-idea-2018-3-java-12.html
- leetcode 217—Contains Duplicate
Given an array of integers, find if the array contains any duplicates. Your function should return t ...