简单实用的JS缓冲效果

tof.j

浏览: 135392 次
性别:
来自: 宁波

最近访客更多访客>>

一叶障脸

garfieldcatcat

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

JavaScript XHTML HTML .net XML

<!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>
<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.1);
 }
 $('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>