您的位置：首页 > Web前端 > JavaScript

JavaScript+CSS下拉菜单系列（三）——伸缩不限，高度不固定的带缓动的下拉菜单

2011-10-02 11:07 423 查看

跟之前菜单示例文章图片素材一样：
代码：
<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>css+javascript下拉菜单系列(三)</title>

<style type="text/css">

body{background-color:#FFFFFF;}

#content{

width:231px;

height:auto;

border:solid 1px #959595;

float:left;

}

.btn_up,.btn_down{

width:231px;

height:26px;

line-height:26px;

font-size:14px;

font-weight:bold;

clear:both;

cursor:pointer;

}

span{

display:block;

margin-left:15px;

}

.btn_up{

background:url(image/sina_music_menu_btn1.gif) transparent scroll no-repeat 0pt 0px;

}

.btn_down{

background:url(image/sina_music_menu_btn2.gif) transparent scroll no-repeat 0pt 0px;

}

.inf{

width:231px;

height:130px;

overflow:hidden;

float:left;

}

ul{

list-style:none outside;

padding:0px;

margin:0px;

}

li{

display:block;

font-size:12px;

color:#333333;

border-bottom:solid 1px #999999;

padding-left:15px;

height:30px;

line-height:30px;

}

.undis{display:none;}

</style>

<script type="text/javascript">

function funHideShow(x,y){

if(x.className=="btn_down"){

   x.className="btn_up";

   funHide(y);

}

else{

   x.className="btn_down";

   document.getElementById(y).className="inf";

   funShow(y);

}

}

var speed=5;

function funHide(y){

var Obj=document.getElementById(y);

var ypos=parseInt(Obj.offsetHeight);

ypos-=(ypos-1)/speed;

//alert(ypos);

if(ypos<=5){

   Obj.className="undis";

   clearTimeout(hideTimer);

   return;

}

Obj.style.height=ypos+"px";

var hideTimer=setTimeout("funHide('"+y+"')",50);

}

function funShow(y){

var Obj=document.getElementById(y);

var ypos=parseInt(Obj.offsetHeight);

ypos+=speed;

//alert(ypos);

if(ypos>130){

   clearTimeout(hideTimer);

   return;

}

Obj.style.height=ypos+"px";

var hideTimer=setTimeout("funShow('"+y+"')",50);

}

</script>

</head>
<body>

<div id="content">

<div class="btn_down"onclick="funHideShow(this,'a');">

   <span>蔡健雅-红色高跟鞋</span>

</div>

<div id="a" class="inf">

   <ul>

    <li>

    ·该怎么去形容你最贴切

    </li>

    <li>

    ·拿什么跟你做比较才算特别

    </li>

    <li>

    ·对你的感觉强烈

    </li>

    <li>

    ·却又不太了解只凭直觉

    </li>

   </ul>

</div>

<div class="btn_down" onclick="funHideShow(this,'b');">

   <span>蔡健雅-红色高跟鞋</span>

</div>

<div id="b" class="inf">

   <ul>

    <li>

    ·你像我在被子里的舒服

    </li>

    <li>

    ·却又像风琢磨不住

    </li>

    <li>

    ·像手纹像散发的香水味

    </li>

    <li>

    ·像爱不释手的红色高跟鞋

    </li>

   </ul>

</div>

<div class="btn_down"onclick="funHideShow(this,'c');">

   <span>蔡健雅-红色高跟鞋</span>

</div>

<div id="c" class="inf">

   <ul>

    <li>

    ·我爱你有种左灯右行的冲突

    </li>

    <li>

    ·疯狂却怕没有退路

    </li>

    <li>

    ·你能否让我停止这种追逐

    </li>

    <li>

    ·就这么双最后唯一的红色高跟鞋

    </li>

   </ul>

</div>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript css class scroll function menu

相关文章推荐

新的分享

章节导航