管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

仿YAHOO的一个小效果下拉效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>隐藏/显示层</title> 
<style type="text/css"> 
<!-- 
body{ 
    background: #FFF; 
    color: #000; 
    font: normal 12px 宋体,arial,sans-serif; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
}

div,form,ul,ol,li,span,p { 
    border: 0; 
    margin: 0; 
    padding: 0; 
}

/*清除float*/ 
.clear{ 
    clear: both; 
    font-size: 1px; 
    visibility: hidden; 
}

/*分类标题*/ 
.class_title{ 
    margin: 0 auto; 
    width: 504px; 
    height: 17px; 
    border: 1px solid #9EB1C0; 
    padding: 1px; 
    background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif); 
}

.class_title h2{ 
    margin: 0; 
    padding: 2px 0 2px 18px; 
    height: 12px; 
    color: #16387C; 
    font: bold 13px 宋体,arial,sans-serif; 
    cursor:pointer; 
    letter-spacing: 2px; 
    text-align: left; 
}

#tabclass1{ 
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat; 
}

/*分类列表（模块一）*/ 
#class_cnt1{ 
    background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x; 
    border: solid #9EB1C0; 
    border-width: 0 1px 1px 1px; 
    height: 287px; 
    margin: 0 auto; 
    text-align: left; 
    width: 506px; 
    display: block; 
  overflow:hidden; 
}

#class_cnt1 p{ 
   margin:0; 
   padding:3px; 
   line-height:150%; 
} 
--> 
</style>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%2F%2F%E5%87%BD%E6%95%B0%E5%90%8D%E7%A7%B0%EF%BC%9AgetObject(objectId)%20%0D%0A%2F%2F%20%20%20%20%20%20%20%20%20%20%E5%8F%82%E6%95%B0objectId%3A%E6%8E%A7%E4%BB%B6%E7%9A%84ID%E5%80%BC%20%0D%0A%2F%2F%E5%87%BD%E6%95%B0%E5%8A%9F%E8%83%BD%EF%BC%9A%E8%8E%B7%E5%BE%97%E6%8E%A7%E4%BB%B6%E7%9A%84ID%E5%80%BC%20%0D%0A%2F%2F%E8%BF%94%20%E5%9B%9E%20%E5%80%BC%EF%BC%9Ature(%E8%8E%B7%E5%BE%97ID%E5%80%BC)%20false(%E8%8E%B7%E5%8F%96ID%E5%A4%B1%E8%B4%A5)%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0Afunction%20getObject(objectId)%20%7B%20%0D%0A%20%20%20%20if(document.getElementById%20%26%26%20document.getElementById(objectId))%20%7B%20%0D%0A%20%20%20%20%2F%2F%20W3C%20DOM%20%0D%0A%20%20%20%20return%20document.getElementById(objectId)%3B%20%0D%0A%20%20%20%20%7D%20else%20if%20(document.all%20%26%26%20document.all(objectId))%20%7B%20%0D%0A%20%20%20%20%2F%2F%20MSIE%204%20DOM%20%0D%0A%20%20%20%20return%20document.all(objectId)%3B%20%0D%0A%20%20%20%20%7D%20else%20if%20(document.layers%20%26%26%20document.layers%5BobjectId%5D)%20%7B%20%0D%0A%20%20%20%20%2F%2F%20NN%204%20DOM..%20note%3A%20this%20won't%20find%20nested%20layers%20%0D%0A%20%20%20%20return%20document.layers%5BobjectId%5D%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E6%98%BE%E7%A4%BA%E5%88%97%E8%A1%A8%E6%A1%86%20%0D%0Afunction%20displayList()%7B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20var%20h%20%3D%20getObject('class_cnt1').offsetHeight%3B%20%20%2F%2F%20%E5%86%85%E5%AE%B9%E5%AE%B9%E5%99%A8class_cnt1%E7%9A%84%E5%88%9D%E5%A7%8B%E9%AB%98%E5%BA%A6%EF%BC%88%E8%BF%99%E6%97%B6%E9%AB%98%E5%BA%A6%E4%B8%BA%EF%BC%9A0%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20var%20max_h%20%3D%20287%3B%20%2F%2F%20%E5%AE%B9%E5%99%A8%E7%9A%84%E6%9C%80%E5%A4%A7%E9%AB%98%E5%BA%A6%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20var%20anim%20%3D%20function()%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20h%20%2B%3D%2050%3B%20%2F%2F%20%E6%AF%8F%E6%AC%A1%E9%80%92%E5%A2%9E50%E5%83%8F%E7%B4%A0%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E5%A6%82%E6%9E%9C%E5%A2%9E%E5%8A%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%BC%80%E5%A7%8B%E8%B6%85%E8%BF%87%E5%AE%B9%E7%9A%84%E6%9C%80%E5%A4%A7%E9%AB%98%E5%BA%A6%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(h%20%3E%3D%20max_h)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('class_cnt1').style.height%20%3D%20%22287px%22%3B%20%2F%2F%20%E5%B7%A5%E6%9C%9F%E9%AB%98%E5%BA%A6%E4%B8%BA287px(%E5%9B%A0%E4%B8%BA%E6%88%91%E4%BB%AC%E5%8F%AA%E5%B8%8C%E6%9C%9B%E5%AE%B9%E5%99%A8%E8%BF%99%E4%B9%88%E9%AB%98)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('tabclass1').style.backgroundImage%3D%22url(http%3A%2F%2Fwww.east-dragon.cn%2Ffiles%2Fsw%2Fimages%2Ftab_drop1.gif)%22%3B%20%2F%2F%20%E8%AE%A9%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE%E6%94%B9%E5%8F%98%E8%83%8C%E6%99%AF%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(tt)%7Bwindow.clearInterval(tt)%3B%7D%20%2F%2F%20%E5%A6%82%E6%9E%9C%E9%AB%98%E5%BA%A6%E5%9C%A8%E6%AF%8F2%E6%AF%AB%E7%A7%92%E9%80%92%E5%87%8F%EF%BC%8C%E5%88%99%E6%B8%85%E6%A5%9A%E6%94%B9%E8%A1%8C%E4%B8%BA%EF%BC%88%E5%A6%82%E6%9E%9C%E4%B8%8D%E6%B8%85%E6%A5%9A%EF%BC%8C%E7%A8%8B%E5%BA%8F%E5%B0%86%E4%B8%80%E7%9B%B4%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C%E9%AB%98%E5%BA%A6%E6%AF%8F2%E6%AF%AB%E7%A7%92%E9%80%92%E5%87%8F%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%7B%20%2F%2F%20%E5%A6%82%E6%9E%9C%E5%A2%9E%E5%8A%A0%E4%B8%AD%E7%9A%84%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%E6%B2%A1%E6%9C%89%E8%B6%85%E8%BF%87287px%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('class_cnt1').style.display%3D%22block%22%3B%20%2F%2F%20%E8%AE%A9%E5%AE%B9%E5%99%A8%E5%8F%AF%E8%A7%81%EF%BC%88%E8%BF%99%E6%A0%B7%E6%88%91%E4%BB%AC%E6%89%8D%E8%83%BD%E5%A4%9F%E7%9C%8B%E5%88%B0%E5%AE%B9%E5%99%A8%E5%9C%A8%E5%A2%9E%E9%AB%98%E7%9A%84%E6%95%88%E6%9E%9C%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('class_cnt1').style.height%20%3D%20h%20%2B%20%22px%22%3B%20%2F%2F%20%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%E4%B8%8D%E6%96%AD%E7%9A%84%E4%BB%A550px%E9%80%92%E5%A2%9E%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20tt%20%3D%20window.setInterval(anim%2C2)%3B%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E6%AF%8F2%E6%AF%AB%E7%A7%92%E5%BE%AA%E7%8E%AF%E4%B8%80%E6%AC%A1%EF%BC%88%E6%AF%8F2%E6%AF%AB%E7%A7%92%EF%BC%8C%E8%BF%90%E8%A1%8C%E4%B8%80%E6%AC%A1anim%5B%E5%AE%B9%E5%99%A8%E7%9A%84%E9%AB%98%E5%BA%A6%E9%80%92%E5%87%8F50px%5D%EF%BC%89%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E9%9A%90%E8%97%8F%E5%88%97%E8%A1%A8%E6%A1%86%20%0D%0Afunction%20hiddenList()%7B%20%0D%0A%20%20%20%20%20%20%20var%20h%20%3D%20getObject('class_cnt1').offsetHeight%3B%20%2F%2F%20%E5%86%85%E5%AE%B9%E5%AE%B9%E5%99%A8class_cnt1%E7%9A%84%E5%88%9D%E5%A7%8B%E9%AB%98%E5%BA%A6%EF%BC%88%E8%BF%99%E6%97%B6%E9%AB%98%E5%BA%A6%E4%B8%BA%EF%BC%9A287px%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20var%20anim%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20h%20-%3D%2050%3B%20%2F%2F%20%E6%AF%8F%E6%AC%A1%E9%80%92%E5%87%8F50%E5%83%8F%E7%B4%A0%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(h%20%3C%3D%205)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('class_cnt1').style.display%3D%22none%22%3B%20%2F%2F%20%E5%86%85%E5%AE%B9%E5%AE%B9%E5%99%A8%E4%B8%8D%E5%8F%AF%E8%A7%81%EF%BC%88%E5%BD%93%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%E5%B0%8F%E4%BA%8E5px%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('tabclass1').style.backgroundImage%3D%22url(http%3A%2F%2Fwww.east-dragon.cn%2Ffiles%2Fsw%2Fimages%2Ftab_drop2.gif)%22%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(tt)%7Bwindow.clearInterval(tt)%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getObject('class_cnt1').style.height%20%3D%20h%20%2B%20%22px%22%3B%20%2F%2F%20%2F%2F%20%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%E4%B8%8D%E6%96%AD%E7%9A%84%E4%BB%A550px%E9%80%92%E5%87%8F%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20var%20tt%20%3D%20window.setInterval(anim%2C2)%3B%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E6%AF%8F2%E6%AF%AB%E7%A7%92%E5%BE%AA%E7%8E%AF%E4%B8%80%E6%AC%A1%EF%BC%88%E6%AF%8F2%E6%AF%AB%E7%A7%92%EF%BC%8C%E8%BF%90%E8%A1%8C%E4%B8%80%E6%AC%A1anim%5B%E5%AE%B9%E5%99%A8%E7%9A%84%E9%AB%98%E5%BA%A6%E9%80%92%E5%87%8F50px%5D%EF%BC%89%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0A%2F%2F%E5%87%BD%E6%95%B0%E5%90%8D%E7%A7%B0%EF%BC%9AshowClassList()%20%0D%0A%2F%2F%E5%87%BD%E6%95%B0%E5%8A%9F%E8%83%BD%EF%BC%9A%E9%9A%90%E8%97%8F-%E6%98%BE%E7%A4%BA%E7%BA%A7%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8%E6%A1%86%EF%BC%88class_cnt1%EF%BC%89%20%0D%0A%2F%2F%E8%BF%94%20%E5%9B%9E%20%E5%80%BC%EF%BC%9A%E6%97%A0%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20%0D%0Afunction%20showClassList()%7B%20%0D%0A%20%20%20%2F%2F%20%E5%A6%82%E6%9E%9C%E5%86%85%E5%AE%B9%E5%AE%B9%E5%99%A8%E4%B8%BA%E4%B8%8D%E5%8F%AF%E8%A7%81%E7%9A%84display%3Anone%20%0D%0A%20%20%20if(getObject('class_cnt1').style.display%20%3D%3D%20%22none%22)%7B%20%20%0D%0A%20%20%20%20%20%20%20displayList()%3B%20%2F%2F%20%E6%98%BE%E7%A4%BA%E5%86%85%E5%AE%B9%E6%A1%86%20%0D%0A%20%20%20%7D%20%0D%0A%20%20%20else%7B%20%2F%2F%20%E5%A6%82%E6%9E%9C%E5%86%85%E5%AE%B9%E5%AE%B9%E5%99%A8%E4%B8%BA%E5%8F%AF%E8%A7%81%E7%9A%84display%3Ablock%20%0D%0A%20%20%20%20%20%20%20%20%20hiddenList()%3B%20%2F%2F%20%E9%9A%90%E8%97%8F%E5%86%85%E5%AE%B9%E6%A1%86%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
    <div class="class_title"> 
         <h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>          
    </div>          
    <div id="class_cnt1"> 
    <p> 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    111111111
 
    </p> 
    </div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程