制作播放视频关灯效果
本文共 944 字，大约阅读时间需要 3 分钟。
网上有个视频插件，但是我觉得不太好用，就自己写了一个，不过各位可以参考参考，
制作步骤 ：
1、页面加个遮罩层，默认是隐藏的
.myzzc { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .9; z-index: 998;} 2、设置视频区域position，当然你也可以设置成:fixed，看你自己的需求了
.video-zc { position: absolute; z-index: 999;} 3、然后你有一个按钮，就是专门切换关灯和开灯的，方法如：
$(".jp-light").click(function(e) { var this$ = $(this); if ($('#jp_container_1').hasClass('jp-state-light')) { $('#jp_container_1').removeClass('jp-state-light'); this$.attr('title', '关灯'); $('.res-content-video').removeClass('video-zc') $('.myzzc').addClass('hide'); } else { $('#jp_container_1').addClass('jp-state-light'); this$.attr('title', '开灯'); $('.res-content-video').addClass('video-zc'); $('.myzzc').removeClass('hide'); } }) 4、显示效果：
总结： z-index必须配合position才能生效
转载地址：http://ufypo.baihongyu.com/
你可能感兴趣的文章
渔人和Rxjs的故事,这次一定教会你前端必会的Rxjs
查看>>
Android彻底组件化demo发布
查看>>
Flutter http请求库dio 1.0正式发布
查看>>
[Scikit-learn教程] 02.05 综合实践
查看>>
接手前端新项目？这里有些注意点你可能需要留意一下
查看>>
【火炉炼AI】深度学习005-简单几行Keras代码解决二分类问题
查看>>
nodejs 中的依赖管理
查看>>
[译] 5 个可以立刻在你的 Ionic App 中用上的动画包
查看>>
Spring源码系列：依赖注入（一）getBean
查看>>
WMI 的攻击，防御与取证分析技术之防御篇
查看>>
iOS Flexbox 布局优化
查看>>
团队项目必备神器——自定义Lint
查看>>
极简Typescript+Node.js 安装教程
查看>>
基于Vue构造器创建Form组件的通用解决方案
查看>>
只有不停的奔跑，你才能停留在原地
查看>>
Vue中的this
查看>>
动手实操 | 作为一名美女设计师，她用 6 小时写了个上传七牛云的桌面客户端...
查看>>
深入理解 Activty 加载速度优化
查看>>
自定义view总结
查看>>
ijkplayer中遇到的问题汇总
查看>>