js點選彈出和隱藏一個div層效果程式碼例項

antzone發表於2017-04-08
JS

本章節分享一段程式碼例項，它實現了點選標題彈出或者關閉一個div層效果。

當然裡面還有一些其他的小細節，下面就進行一下分享。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  text-align:center;
}
p{
  cursor:pointer;
  margin:0;
  padding:0;
  font-size:24px;
  display:inline;
}
div a:link, div a:visited{
  color:#666;
  text-decoration:none;
}
div a:hover{
  color:#FF6600;
  text-decoration:underline;
}
div{
  border:2px solid #666;
  background:#fff;
  margin:5px auto;
  overflow:hidden;
  display:none;
  padding:5px 10px;
}
ul,li{
  margin:0;
  padding:0;
}
li{
  list-style:none;
  width:70px;
}
li.title{
  font-weight:bold;
}
</style>
<script type="text/javascript">
var w=0;
var h=0;
function emotion(){
  var oMenu=document.getElementById("menu");
  if(w<=50){
    oMenu.style.display = "block";
    fnLarge();
  }
  else{
    fnSmall();
  }
}
function fnLarge(){
  var oMenu=document.getElementById("menu");
  if(w<200){
    w+=50;
    h+=25;
    oMenu.style.width=w+"px";
    oMenu.style.height=h+"px";
    window.setTimeout("fnLarge()",10);
  }
}
function fnSmall(){
  var oMenu=document.getElementById("menu");
  if(w>0){
    w-=50;
    h-=25;
    oMenu.style.width=w+"px";
    oMenu.style.height=h+"px";
    window.setTimeout("fnSmall()",5);
  }
  else{
    oMenu.style.display = "none";
  }
}
window.onload=function(){
  var op=document.getElementById("antzone");
  var odiv=document.getElementById("menu");
  var lis=odiv.getElementsByTagName("li");
  op.onclick=function(){emotion();}
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=function(){
      fnSmall();
    }
  }
}
</script>
</head>
<body>
<p id="antzone">螞蟻部落歡迎您</p>
<div id="menu">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="80" valign="top" align="left">
        <ul>
          <li class="title">ASP</li>
          <li><a href="#">新聞</a></li>
          <li><a href="#">論壇</a></li>
          <li><a href="#">CMS</a></li>
          <li></li>
        </ul>
      </td>
      <td width="80" valign="top" align="left">
        <ul>
          <li class="title">;PHP</li>
          <li><a href="#">文章</a></li>
          <li><a href="#">聊天</a></li>
          <li><a href="#">外掛</a></li>
          <li><a href="#">企業</a></li>
        </ul>
      </td>
      <td width="80" valign="top" align="left">
        <ul>
          <li class="title">JSP</li>
          <li><a href="#">AJAX</a></li>
          <li><a href="#">JQUERY</a></li>
          <li><a href="#">MYSQL</a></li>
          <li><a href="#">softwhy.com</a></li>
        </ul>
    </td>
   </tr>
</table>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.var w=0，宣告一個變數並賦初值為0，儲存元素的寬度。


（2）.var h=0，宣告一個變數並賦初值為0，儲存元素的高度。

（3）.function emotion(){

  var oMenu=document.getElementById("menu");

  if(w<=50){

    oMenu.style.display = "block";

    fnLarge();

  }

  else{

    fnSmall();

  }

}，此方法可以實現元素的隱藏和顯示。

如果元素當前的寬度小於等於50，那麼就執行顯示操作，否則執行隱藏操作。

（4）.function fnLarge(){

  var oMenu=document.getElementById("menu");

  if(w<200){

    w+=50;

    h+=25;

    oMenu.style.width=w+"px";

    oMenu.style.height=h+"px";

    window.setTimeout("fnLarge()",10);

  }

}，以遞迴動畫的方式展現元素。

採用定時器函式遞迴呼叫函式，每執行一次元素的尺寸增加一定數目。

（5）.function fnSmall(){

  var oMenu=document.getElementById("menu");

  if(w>0){

    w-=50;

    h-=25;

    oMenu.style.width=w+"px";

    oMenu.style.height=h+"px";

    window.setTimeout("fnSmall()",5);

  }

  else{

    oMenu.style.display = "none";

  }

}，和上面的原理是一樣的，只不過是隱藏元素。

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

（7）.var op=document.getElementById("antzone")，獲取id屬性值為antzone的元素物件。

（8）.var lis=odiv.getElementsByTagName("li")，獲取li元素物件集合。

（9）.for(var index=0;index<lis.length;index++){

  lis[index].onclick=function(){

    fnSmall();

  }

}，採用for迴圈的方式批量註冊事件處理函式。

二.相關閱讀:

（1）.setTimeout()方法可以參閱setTimeout()一章節。

（2）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

相關文章