当前位置：Gxlcms > JavaScript > javascript层展开/关闭，带缓冲效果_javascript技巧

javascript层展开/关闭，带缓冲效果_javascript技巧

时间：2021-07-01 10:21:17 帮助过：5人阅读

<!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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript层展开/关闭，带缓冲效果_javascript技巧

人气教程排行