Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-20 20:12:41

js隐藏div 隐藏div层隐藏div js div隐藏显示

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
function toggle(o){
  if (!o.tid)o.tid = "_" + Math.random() * 100;
  if (!window.toggler)window.toggler = {};
  if (!window.toggler[o.tid]){
    window.toggler[o.tid]={
      obj:o,
      maxHeight:o.offsetHeight,
      minHeight:mh,
      timer:null,
      action:1
    };
  }
  o.style.height = o.offsetHeight + "px";
  if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
  window.toggler[o.tid].action *= -1;
  window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
  var t = window.toggler[id];
  var o = window.toggler[id].obj;
  if (t.action < 0){
    if (o.offsetHeight <= t.minHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  else{
    if (o.offsetHeight >= t.maxHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
  window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script>
<style type="text/css">
div.xx{border:solid 3px #f90;overflow:hidden; width:500px; font-size:12px; line-height:30px; color:#999999;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px; font-size:12px;cursor:pointer;background:#f00; color:#FFFFFF; font-weight:bold;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">点击这里展开收缩</h5>
<p>老鼠爱上了猫，唱到：我爱你，爱着你，就象老鼠爱大米，不管有多少风雨，我都会依然陪着你。猫：别来虚的，俺娘说了，不以结婚为目的谈恋爱都是耍流氓！</p>

<p>一日，一只麻雀不小心飞进燕子窝，正巧雄燕子在窝里。雄燕子吼道：“你是何方妖孽？”麻雀吃了一惊，马上说：“老公，是我啊，刚整完容。”</p>

<p>一只乌鸦不小心将大便排在了狐狸身上，狐狸大怒：这么多年了骗你块肉，你还记仇呀。乌鸦说道：你不说我还真忘记了，现在物价都涨这么高，你应该还我头猪。</p>

<p>灰太狠抓住美羊羊，并把美羊羊的肚子搞大。红太狼得知后特别生气，用平底锅狠狠的拍灰太狠。灰太狠委屈的说：“老婆，其实我只是想要你多吃到一只小羊而已。”</p>
</div>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：弹出可随页面自适应大小的js特效图层窗口代码

下一篇文章：精美展开与收缩的js特效图层代码