网上有个视频插件,但是我觉得不太好用,就自己写了一个,不过各位可以参考参考,地址
制作步骤 :
1、页面加个遮罩层,默认是隐藏的
<div class="myzzc hide"> </div>
.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才能生效