层展开/关闭运动缓冲效果

最新推荐文章于 2022-04-20 22:48:50 发布

转载最新推荐文章于 2022-04-20 22:48:50 发布 · 1.1k 阅读

文章标签：

#scroll #function #border #object #string #null

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于实现网页元素的动态展开和关闭效果。该函数可通过设置不同的参数来调整展开的高度和速度。

http://www.corange.cn/archives/2008/10/1930.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" xml:lang="zh-CN" lang="zh-CN"> 
<head> 
<title>层展开/关闭 - 运动缓冲效果</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<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){ 
if(obj == undefined){return false;} 
var hh = h || 200; 
var ss = s || 1.2; 
var obj = typeof(obj)=="string"?document.getElementById(obj):obj; 
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(){ 
document.getElementById('detail').onclick = function(){ 
Scroll('detail', 300, 1.3); 
} 
document.getElementById('text').onclick = function(){ 
Scroll('text'); 
} 
} 
</script> 
</head> 
<body> 
<p id="detail" style="border:1px dashed #f00;">这是一个段落啦!!哇哈哈哈<br/>点我一下下啦:)</p> 
<div id="text" style="border:1px solid #0f0">Hello World!<br/>点击展开www.corange.cn</div> 
<button onclick="Scroll('text', 400, 1.2)">Hello World</button> 
</body> 
</html> 