实用资源视频播放页怎样实现点击按钮关灯效果

视频播放页怎样实现点击按钮关灯效果

在有的视频网站视频播放页会有一个关灯的按钮,用户点击后网页上除了视频外,其他的元素均以黑色覆盖,就像电影院关灯的效果,如果你的网站有视频播放的页面,也可以设置这样一个效果:

head部分引入CSS
#switch {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(images/switch.png) no-repeat 0 0;
  cursor: pointer;
  z-index: 200;
  margin: 0;
  right: 50px;
  top: 80px;
}
#switch_off {
  width: 30px;
  height: 30px;
  background: url(images/switch.png) no-repeat 0 -30px;
  cursor: pointer;
  z-index: 200;
}
body部分代码
<div id="top"></div>
<div class="container">
<h1>ABC 点击右边按钮关灯</h1>
<div id="switch"></div>
<iframe id="video" frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=t05327abtqr&tiny=0&auto=0" allowfullscreen></iframe>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.allofthelights.js"></script>
<script>
$(document).ready(function() {
$("#video").allofthelights();  
});
</script>

这里以一个腾讯视频为例,请将js部分的代码放到</body>标签前面。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/102.html