展开层与关闭层的动态缓冲效果特效

最新推荐文章于 2022-05-22 21:42:21 发布

iteye_6481

最新推荐文章于 2022-05-22 21:42:21 发布

阅读量143

点赞数

文章标签： JavaScript XHTML XML HTML ViewUI

本文介绍了一个JavaScript函数Scroll，用于实现元素的展开与关闭效果，并带有平滑的运动缓冲。该函数可以应用于不同高度的元素，通过调整速度参数实现不同的动画效果。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
<head>
<title>层展开/关闭-运动缓冲效果</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<metaname="keywords"content="小秦,展开,关闭,运动缓冲,效果,javascript,封装"/>
<metaname="description"content="展开/关闭-运动缓冲效果"/>
<metaname="copyright"content="Copyright2008XQin.cn"/>
<metaname="author"content="小秦"/>
<scripttype="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关闭(对象的高度等于原始高度)
*/
functionScroll(obj,h,s){
varh=h||200;
vars=s||1.2;
varobj=typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj==undefined){returnfalse;}
varstatus=obj.getAttribute("status")==null;
varoh=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{
varoldH=Math.ceil(obj.getAttribute("oldHeight"));
}
varreSet=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);
}
}
varIntervalId=window.setInterval(reSet,10);
returnstatus;
}
window.onload=function(){
var$=function(id){returndocument.getElementById(id)};
$('menu').onclick=function(){
Scroll('menu',this.scrollHeight,1.2);
}
$('test').onclick=function(){
Scroll('test',300,1.2);
}
}
</script>
</head>
<body>
<divid="test"style="border:1pxsolid#f00;width:200px">单击后展开指定高度300px</div>
<divid="menu"style="position:absolute;top:10px;left:400px;border:1pxsolid#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>