代码使用指南

您所在的位置:网站首页 建站相关 代码使用指南  

几个不错的自动收缩菜单导航效果

2016-10-14|发布:合元网络|点击数: 1201

第一个:
<!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>runcode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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 1px;overflow:hidden;} 
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} 
</style> 
</head> 
<body> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
</div> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
</div> 
</body> 
</html>


第二个:
<!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>runcode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="Author" content="Sheneyan" /> 
<script type="text/javascript"> 
var mh = 30;//最小高度 
var step = 1;//每次变化的px量 
var ms = 10;//每隔多久循环一次 
var caiying2007=202//最大高度 
window.onload=function init(){ 
var obj_init=document.getElementsByTagName("div") 
for (var oi=0;oi<obj_init.length;oi++){ 
    if (obj_init[oi].className=="xx"){obj_init[oi].style.height=mh + "px";} 
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, 
      maxHeight:caiying2007, 
      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 1px;overflow:hidden;height:200px} 
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} 
</style> 
</head> 
<body> 
<div class="xx"><h5 onclick="toggle(this.parentNode);" >伸缩效果</h5> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
<p>内容</p> 
</div> 
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> 
<p>sdf容</p> 
<p>sdf容</p> 
<p>sf容</p> 
<p>sfd容</p> 
</div> 
<script> 
</script> 
</body> 
</html>

 

 

分享到:
CopyRight 2012-2017 合元网络 版权所有
公司地址:郑州市高新区升龙又一城A区2号楼2单元17楼 热线电话:15303843903 技术QQ:1808040020 微 信:15303843903 豫ICP备14027215号