js点击按钮实现带遮罩层的弹出视频效果


Posted in Javascript onDecember 19, 2015

本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下

最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层

js点击按钮实现带遮罩层的弹出视频效果

点击黄色区域可以关闭视频 并回到最初的状态。

js点击按钮实现带遮罩层的弹出视频效果

页面主要代码:main中主要包含一个a,控制显示的按钮。设置有id值。

<div class="main">
  <a href="javascript:;" class="video" id="video"></a>
</div>

以下代码就是用来控制视频的显示效果,.video-btn 包含了视频显示区域以及右边黄色关闭按钮(虽然黄色关闭按钮有点丑)。

id="shadow"用来控制遮罩层。主要是对各元素设置id的值  后面js就可以方便的调用各元素。

<div class="video-btn" id="video-btn">
   <div class="video-area" id="video-area"></div>
   <a class="video-shut" id="video-shut">x</a>
 </div>
 <div id="shadow"></div>

下面来看一下有关css

首先设置video-btn区域。

.video-btn{
      position: absolute;
      width:600px;
      height: 300px;
      background:black;
      top:50%;
      left: 50%;
      margin-top: -150px;
      margin-left:-300px;
      display: none;
      z-index: 101;
    }
 .video-area{
      float:left;
      width:500px;
      height: 300px;
      background:red;
    }
.video-shut{
      height:100px;
      width:100px;
      font-size:40px;
      color:pink;
      float:left;
      text-align: center;
      /*line-height: 50px;*/
      background: yellow;
      display: block;
      padding-top:30px;
    }

然后设置遮罩层的css

#shadow{
      position: absolute;
      opacity: 0.5;
      filter:alpha(opacity=50);
      bottom:0;
      left: 0;
      right: 0;
      top: 0;
      background:black;
      z-index: 100;
      display: none;
    }

重点1:此处一定把两个div设为绝对定位,让其脱离文档流。

重点2:遮罩层要设置bottom,left,right,top值为0 这样遮罩层就可以平铺整个屏幕了。

重点3:一定要把这两个div设为display:none。让用户一开始是看不到这两个div ,否则一进去就看到这两个会很丑。

重点4:要设置z-index的值,黄色按钮和显示视频那个div的优先级一定要比遮罩层的优先级大,不然点击不了。

现在开始js:前面五个获取id赋值。然后在点击黄色按钮时响应事件。

点击事件1:将视频所在的div设置display:block。将遮罩层所在div设置display:block。 同时,视屏div内显示土豆视频。  此链接为土豆网的分享链接。

点击事件2:在点击黄色x按钮时,应该将这两个div隐藏起来。即设置两个div的display:none。

<script>
  var obtn=document.getElementById('video');
  var ovideo=document.getElementById('video-btn');
  var oatn=document.getElementById('video-area');
  var oshut=document.getElementById('video-shut');
  var oshadow=document.getElementById('shadow');
  obtn.onclick=function () {
    ovideo.style.display='block';
    oshadow.style.display='block';
    oatn.innerHTML='<embed src="http://www.tudou.com/v/Bs_lZPxcoRs/&rpid=818231113&autoPlay=true&resourceId=818231113_04_05_99/v.swf" allowFullScreen="true" quality="high" width="500" height="300" align="middle" allowScriptAccess="always" flashvars ="isAutoPlay=true" type="application/x-shockwave-flash"></embed>';
  }
  oshut.onclick= function () {
    ovideo.style.display='none';
    oshadow.style.display='none';
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
javascript精确统计网站访问量实例代码
Dec 19 #Javascript
js实现图片轮播效果
Dec 19 #Javascript
js实现图片上传并正常显示
Dec 19 #Javascript
thinkphp实现无限分类(使用递归)
Dec 19 #Javascript
15个常用的jquery代码片段
Dec 19 #Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python中的自省(反射)详解
2015/06/02 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
自学python用什么系统好
2020/06/23 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
市场调查策划方案
2014/06/10 职场文书
公司聚餐通知
2015/04/22 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript