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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 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
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JS二分查找算法详解
2017/11/01 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python实现移位加密和解密
2019/03/22 Python
python学生管理系统的实现
2020/04/05 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python grpc超时机制代码示例
2020/09/14 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
JAVA代码查错题
2014/10/10 面试题
日语专业个人的求职信
2013/12/03 职场文书
文秘人员工作职责
2014/01/31 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
房屋出租委托书格式
2014/09/23 职场文书
秦兵马俑导游词
2015/02/02 职场文书
刮痧观后感
2015/06/05 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技