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

更新時間：2015年12月19日 16:33:18 作者：綿綿面包

這篇文章主要介紹了js點擊按鈕實現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下

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

最終顯示效果：點擊紅色按鈕，會有視屏彈出并帶有遮罩層

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

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

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

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

id="shadow"用來控制遮罩層。主要是對各元素設(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;
    }

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

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

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

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

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

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

點擊事件2：在點擊黃色x按鈕時，應(yīng)該將這兩個div隱藏起來。即設(shè)置兩個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)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: