div展开收缩代码

最新推荐文章于 2020-12-23 06:03:42 发布

Rayban

最新推荐文章于 2020-12-23 06:03:42 发布

阅读量727

点赞数 1

分类专栏：源代码文章标签： div function class button input

源代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>div展开收缩代码</title>
  <style>
    * { margin:0; padding:0;}
    body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
    h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}
    .class1 { width:40%; position:relative; margin:0 auto; padding:5px;}
    span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}
    #class1content { height:300px;overflow:hidden;display:none;}
  </style>
  <script>
    function $(element){
     return element = document.getElementById(element);
    }

    function $D(){
     var d=$('class1content');
     var h=d.offsetHeight;
     var maxh=300;
     function dmove(){
      h+=50; //设置层展开的速度
      if(h>=maxh){
       d.style.height='300px';
       clearInterval(iIntervalId);
      }else{
       d.style.display='block';
       d.style.height=h+'px';
      }
     }
     iIntervalId=setInterval(dmove,2);
    }

    function $D2(){
     var d=$('class1content');
     var h=d.offsetHeight;
     var maxh=300;
     function dmove(){
      h-=50;//设置层收缩的速度
      if(h<=0){
       d.style.display='none';
       clearInterval(iIntervalId);
      }else{
       d.style.height=h+'px';
      }
     }
    iIntervalId=setInterval(dmove,2);
    }

    function $use(targetid,objN){
     var d=$(targetid);
     var sb=$(objN);
     if(d.style.display=="block"){
        $D2();
        d.style.display="none";
        sb.innerHTML="展开";
      }else {
      $D();
        d.style.display="block";
        sb.innerHTML='收缩';
      }
    }
  </script>
</head>
<body>
<div class="class1">
<h1>div展开收缩效果</h1>
<span id="stateBut" onClick="$use('class1content','stateBut')">展开</span>
<div id="class1content">
    <textarea cols="50" rows="5" style="width:100%; height:90%"></textarea>
    <input name="submit" type="button" value="回复">
</div>
</div>
</body>

Rayban

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div展开收缩代码

div展开收缩代码 * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-wei
复制链接

扫一扫