梦的天行者-yahoo首页伸缩效果[JS特效] 1983

Humormind、Sam Tsai、2009-03-01 18:26:37　日志分类：系统程序

yahoo首页伸缩效果[JS特效]

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" \n
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> \n
<html xmlns="http://www.w3.org/1999/xhtml"> \n
<head> \n
<title>runcode</title> \n
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \n
<meta name="Author" content="Sam" /> \n
<script type="text/javascript"> \n
var mh = 30;//最小高度 \n
var step = 1;//每次变化的px量 \n
var ms = 10;//每隔多久循环一次 \n
function toggle(o){ \n
  if (!o.tid)o.tid = "_" + Math.random() * 100; \n
  if (!window.toggler)window.toggler = {}; \n
  if (!window.toggler[o.tid]){ \n
    window.toggler[o.tid]={ \n
      obj:o, \n
      maxHeight:o.offsetHeight, \n
      minHeight:mh, \n
      timer:null, \n
      action:1 \n
    }; \n
  } \n
  o.style.height = o.offsetHeight + "px"; \n
  if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer); \n
  window.toggler[o.tid].action *= -1; \n
  window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms ); \n
} \n
function anim(id){ \n
  var t = window.toggler[id]; \n
  var o = window.toggler[id].obj; \n
  if (t.action < 0){ \n
    if (o.offsetHeight <= t.minHeight){ \n
      clearTimeout(t.timer); \n
      return; \n
    } \n
  } \n
  else{ \n
    if (o.offsetHeight >= t.maxHeight){ \n
      clearTimeout(t.timer); \n
      return; \n
    } \n
  } \n
  o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px"; \n
  window.toggler[id].timer = setTimeout("anim('"+id+"')",ms ); \n
} \n
</script> \n
<style type="text/css"> \n
div.xx{border:solid 1px;overflow:hidden;} \n
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} \n
</style> \n
</head> \n
<body> \n
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5> \n
<p>first line</p> \n
<p>second line</p> \n
<p>third line</p> \n
<p>fourth line</p> \n
</div> \n
</body> \n
</html>

[Ctrl+A 全选提示：您可以先修改内容后再执行。]

● 部分日志内容截取自网络, 若有注解不清或侵害到您的权益请留言告知, 定当立即修正或删除.

线上文章朗读

分析22款优秀logo

Share this post：

载入评论资料中,请稍后…

正在加载日志评论签写框，请稍后……

日志分类

站内搜寻

封存日志

2009,9 共1篇日志
2009,5 共3篇日志
2009,4 共2篇日志
2009,3 共2篇日志
2009,2 共8篇日志
2009,1 共17篇日志
2008,12 共2篇日志

Google 广告

行事日历

载入行事日历模组中，请稍后...

会员登入

载入会员登入模组中，请稍后...

热门日志