javascript 层展开/关闭，带缓冲效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 层展开/关闭，带缓冲效果

技术文章搜索

关键字

Javascript 中的 javascript 层展开/关闭，带缓冲效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 302 ::

收藏到网摘: n/a

JS幻想读取二进制文件仿淘宝首页分类列表效果实现代码

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

点击运行可以看到效果:

<!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 层展开/关闭，带缓冲效果

评论 (0) All