js点击弹出和隐藏一个div层效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击标题弹出或者关闭一个div层效果。

当然里面还有一些其他的小细节,下面就进行一下分享。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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="#">pipipi.net</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()一章节。

回复

我来回复
  • 暂无回复内容