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 相关文章推荐
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 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
西德产收音机
2021/03/01 无线电
PHP模板引擎SMARTY
2006/10/09 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python实现的rsa加密算法详解
2018/01/24 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
大一自我鉴定范文
2013/12/27 职场文书
外企求职信范文分享
2013/12/31 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
教学督导岗位职责
2015/04/10 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis