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触发a标签跳转事件示例代码
Jul 21 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
详细分析vue响应式原理
Jun 22 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 根据IP地址控制访问的代码
2010/04/22 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python的迭代器和生成器
2015/07/29 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python psutil模块使用方法解析
2019/08/01 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
自考生自我鉴定范文
2013/10/01 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
护士自我推荐信范文
2015/03/24 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
无罪辩护词范文
2015/05/21 职场文书
演讲开场白台词大全
2015/05/29 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB