JavaScript點選按鈕彈出層效果

admin發表於2018-07-16
JavaScript

強大的效果其實都是由一個個簡單的功能組合而成的，下面介紹一下如何實現點選一個按鈕彈出一個層的效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
div{
  width:160px;
  height:100px;
  background:#33ccff;
  display:none;
  position:absolute;
}
div ul{text-align: center;}
div li{list-style-type: none;}
button{
  top:300px;
  left:400px;
  position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function(){ 
  var btn=document.getElementsByTagName('button')[0]; 
  var flt=document.getElementsByTagName('div')[0]; 
  btn.onclick=function(ev){ 
    var ev=ev||window.event;
    if(ev.cancelBubble){ev.cancelBubble=true;}
    else{ev.stopPropagation()}    var x=btn.offsetLeft-15+'px'; 
    var y=btn.offsetTop-100+'px'; 
    flt.style.top=y; 
    flt.style.left=x; 
    flt.style.display='block'; 
  } 
  document.onclick = function(){ 
    flt.style.display='none'; 
  } 
}
</script>
</head>
<body>
<button id="btn">點選彈出層</button>
<div>
  <ul id="nav">
    <li class="item1"><a href="">螞蟻部落一</a></li>
    <li class="item2"><a href="">螞蟻部落二</a></li>
    <li class="item3"><a href="">螞蟻部落三</a></li>
    <li class="item4"><a href="">螞蟻部落四</a></li>
    <li class="item5"><a href="">螞蟻部落五</a></li>
  </ul>
</div>
</body>
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var btn=document.getElementsByTagName('button')[0]，獲取按鈕物件，getElementsByTagName()函式獲取的是一個物件集合，所以要想獲取某一個物件，則需要使用索引值訪問集合中的元素。

（3）.var flt=document.getElementsByTagName('div')[0]，和上面一樣的道理，這裡不多介紹了。

（4）.btn.onclick=function(){}，為按鈕註冊onclick事件處理函式。

（5）.var ev=ev||window.event，事件物件的相容性處理。

（6）.if(ev.cancelBubble){ev.cancelBubble=true;}，阻止事件冒泡，IE8和IE8以下瀏覽器支援，之所以要阻止事件冒泡，是防止點選按鈕之後，會彈出視窗，但是事件會冒泡的document，瞬間又將視窗隱藏，於是點選按鈕也就無法彈出視窗了。

（7）.else{ev.stopPropagation()}，標準瀏覽器彈出視窗效果。

（8）.var x=btn.offsetLeft-15+'px'，設定彈出視窗距離body左側的尺寸。

（9）.var y=btn.offsetTop-100+'px'，設定彈出視窗距離body上測的尺寸。

（10）.flt.style.top=y，flt.style.left=x，設定它們的樣式。

（11）.flt.style.display='block'，將彈出層顯示。

（12）.document.onclick=function(){}，在document上註冊onclick事件處理函式。

（13）.flt.style.display='none'，將彈出視窗隱藏。

二.相關閱讀：

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。 

（2）.var ev=ev||window.event參閱var ev=window.event||ev 作用一章節。 

（3）.stopPropagation()參閱JavaScript stopPropagation()一章節。 

（4）.offsetLeft屬性參閱JavaScript offsetLeft一章節。 

（5）.事件冒泡參閱JavaScript 事件冒泡一章節。

相關文章