层展开与收缩的运动缓冲效果

脚本代码

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>层展开/关闭 - 运动缓冲效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="小秦,展开,关闭,运动缓冲,效果,javascript,封装" />
<meta name="description" content="展开/关闭 - 运动缓冲效果" />
<meta name="copyright" content="Copyright 2008 XQin.cn" />
<meta name="author" content="小秦" />
<script type="text/javascript">
/*
 函数名称: Scroll
 Scroll(obj, h, s)
 参数说明:
 obj,[object] id值或对象. 必需
 h,[height] 展开后的高度. 可选(默认为200px)
 s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
 函数返回值:
 true 展开(对象的高度等于展开后的高度)
 false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
 var h = h || 200;
 var s = s || 1.2;
 var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
 if(obj == undefined){return false;}
 var status = obj.getAttribute("status")==null;
 var oh = parseInt(obj.offsetHeight);
 obj.style.height = oh;
 obj.style.display = "block";
	obj.style.overflow = "hidden";
 if(obj.getAttribute("oldHeight") == null){
 obj.setAttribute("oldHeight", oh);
 }else{
 var oldH = Math.ceil(obj.getAttribute("oldHeight"));
 }
 var reSet = function(){
 if(status){
 if(oh < h){
 oh = Math.ceil(h-(h-oh)/s);
 obj.style.height = oh+"px";
 }else{
 obj.setAttribute("status",false);
 window.clearInterval(IntervalId);
 }
 }else{
 obj.style.height = oldH+"px";
 obj.removeAttribute("status");
 window.clearInterval(IntervalId);
 }
 }
 var IntervalId = window.setInterval(reSet,10);
	return status;
}
window.onload= function(){
 var $ = function(id){return document.getElementById(id)};
 $('menu').onclick = function(){
 Scroll('menu',this.scrollHeight,1.2);
 }
 $('test').onclick = function(){
 Scroll('test',300,1.2);
 }
}
</script>
</head>
<body>
<div id="test" style="border:1px solid #f00;width:200px">单击后 展开指定高度 300px</div>
<div id="menu" style="position:absolute;top:10px;left: 400px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
单击后 根据展开的高度根据内容而变 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
</div>
</body>
</html>

当前页面所处路径为共享世纪 / 脚本特效 / 页面布局 / ，本特效的Tag为：共享世纪

会员登陆close X