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 24 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
JS常用知识点整理
Jan 21 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JS实现手写parseInt的方法示例
Sep 24 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python中dict和set的用法讲解
2019/03/28 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
土木工程应届生自荐信
2013/09/24 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
客户接待方案
2014/02/26 职场文书
科学发展观活动总结
2014/08/28 职场文书
微信搭讪开场白
2015/05/28 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers