[编程开发]div+css 显示 隐藏 滑动效果

〈！doctype html public "-//w3c//dtd html 4.0 transitional//en"〉
〈html〉
〈meta http-equiv=content-type content="text/html; charset=gb2312"〉
〈script type=text/javascript〉
function getobject(objectid) {
    if(document.getelementbyid && document.getelementbyid(objectid)) {

 return document.getelementbyid(objectid);
    } else if (document.all && document.all(objectid)) {

 return document.all(objectid);
    } else if (document.layers && document.layers［objectid］) {

 return document.layers［objectid］;
    } else {
 return false;
    }
}

function displaylist(n,dheight){ 
         var h = getobject(‘content‘+ n).offsetheight;
       var max_h = dheight;
  
      
       var anim = function(){   
        h += 15;
        if(h 〉= max_h){
              getobject(‘content‘+ n).style.height = dheight;
              getobject(‘img‘+ n).src="4/-.gif";
              if(tt){window.clearinterval(tt);}
        }
        else{
                getobject(‘content‘+ n).style.display="block";
                getobject(‘content‘+ n).style.height = h + "px";
        }
      }
     var tt = window.setinterval(anim,2);
}

function hiddenlist(n,dheight){
       var h = getobject(‘content‘+ n).offsetheight;
     var anim = function(){
        h -= 15;
       
        if(h 〈= 5){
              getobject(‘content‘+ n).style.display="none";
             getobject(‘img‘+ n).src="4/+.gif";
             if(tt){window.clearinterval(tt);}
         }
         else{
             getobject(‘content‘+ n).style.height = h + "px";
         }
     }
     var tt = window.setinterval(anim,2);
}

function showclasslist(n,dheight){
 var dheight=dheight
 
   if(getobject(‘content‘+ n).style.display == "none"){
       getobject(‘tdtitle‘ + n).title = "点击收缩"
    getobject(‘showtxt‘ + n).innertext = "(点击收缩)"
       displaylist(n,dheight); // 显示内容框
   }
   else{
       getobject(‘tdtitle‘ + n).title = "点击展开"
    getobject(‘showtxt‘ + n).innertext = "(点击展开)"
    hiddenlist(n,dheight); 
  }
}
〈/script〉
〈style type=text/css〉
body,td,th {
 font-size: 12px;
}
.a1 {display: block; overflow: hidden; width: 600px; height:120px; border:1px solid #bad2ee; border-top:0; background:#ecf6ff;}
.a2 {float: left; width: 600px;}
.a3 {width:600px; cursor:pointer; text-align:left; height:30px; border:1px solid #bad2ee;}
.a4{margin:0px; padding:0px;}
.a4 li{list-style-image:url(4/j.gif); margin:0px 0px 0px 24px; padding:0px; line-height:24px;}
.a5 {margin:8px 5px 0 10px;}
〈/style〉
〈/head〉
〈body〉
〈div class="a3" id=tdtitle1 title=点击收缩 onclick=showclasslist(1,120)〉
〈img class="a5" id=img1 src="4/-.gif"〉〈strong〉其它服务〈/strong〉
〈/div〉
〈div class="a1" id=content1〉
〈div class="a2"〉
〈ul class="a4"〉
〈li〉机房:电信、网通双骨干网接入，互联互通。〈/li〉
〈li〉带宽:100m共享。〈/li〉
〈li〉服务:免费重启，免费系统重装，网络运行监控。〈/li〉
〈li〉安全:免费千兆"黑洞"反攻击设备、免费千兆防火墙系统。〈/li〉
〈li〉备注:不送产权。〈/li〉
〈/ul〉
〈/div〉
〈/div〉
〈/body〉〈/html〉