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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
JQuery for与each性能比较分析
May 14 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jQuery选择器全面总结
Jan 06 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python 开发Activex组件方法
2009/11/08 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python中的字典遍历备忘
2015/01/17 Python
python实现学生信息管理系统源码
2021/02/22 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
给同学的道歉信
2014/01/16 职场文书
应聘面试自我评价
2014/01/24 职场文书
会计岗位描述
2014/02/22 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
文体活动总结范文
2014/05/05 职场文书
个人欠款担保书
2014/05/20 职场文书
员工保密承诺书
2014/05/28 职场文书
搞笑的获奖感言
2014/08/16 职场文书
七夕活动策划方案
2014/08/16 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年教师国培感言
2015/08/01 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python