欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果

 更新時(shí)間：2015年12月19日 16:33:18   作者：綿綿面包  
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下

本文實(shí)例講解了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果，涉及到css以及JavaScript，分享給大家供大家參考，具體內(nèi)容如下

最終顯示效果：點(diǎn)擊紅色按鈕，會(huì)有視屏彈出 并帶有遮罩層

點(diǎn)擊黃色區(qū)域可以關(guān)閉視頻 并回到最初的狀態(tài)。

頁面主要代碼：main中主要包含一個(gè)a，控制顯示的按鈕。設(shè)置有id值。

<div class="main">
  <a href="javascript:;" class="video" id="video"></a>
</div>

以下代碼就是用來控制視頻的顯示效果，.video-btn 包含了視頻顯示區(qū)域以及右邊黃色關(guān)閉按鈕（雖然黃色關(guān)閉按鈕有點(diǎn)丑）。

id="shadow"用來控制遮罩層。主要是對(duì)各元素設(shè)置id的值  后面js就可以方便的調(diào)用各元素。

 <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>

下面來看一下有關(guān)css

首先設(shè)置video-btn區(qū)域。

.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;
    }

然后設(shè)置遮罩層的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;
    }

重點(diǎn)1：此處一定把兩個(gè)div設(shè)為絕對(duì)定位，讓其脫離文檔流。

重點(diǎn)2：遮罩層要設(shè)置bottom，left，right，top值為0 這樣遮罩層就可以平鋪整個(gè)屏幕了。

重點(diǎn)3：一定要把這兩個(gè)div設(shè)為display：none。讓用戶一開始是看不到這兩個(gè)div ，否則一進(jìn)去就看到這兩個(gè)會(huì)很丑。

重點(diǎn)4：要設(shè)置z-index的值，黃色按鈕和顯示視頻那個(gè)div的優(yōu)先級(jí)一定要比遮罩層的優(yōu)先級(jí)大，不然點(diǎn)擊不了。

現(xiàn)在開始js：前面五個(gè)獲取id賦值。然后在點(diǎn)擊黃色按鈕時(shí)響應(yīng)事件。

點(diǎn)擊事件1：將視頻所在的div設(shè)置display：block。將遮罩層所在div設(shè)置display：block。 同時(shí)，視屏div內(nèi)顯示土豆視頻。  此鏈接為土豆網(wǎng)的分享鏈接。

點(diǎn)擊事件2：在點(diǎn)擊黃色x按鈕時(shí)，應(yīng)該將這兩個(gè)div隱藏起來。即設(shè)置兩個(gè)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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論