草履虫的BLOG-区域块伸缩效果实现(toggle效果)

区域块伸缩效果实现(toggle效果)
项目:区域块伸缩效果实现(toggle效果,javascript类实现)
作者:草履虫
邮件:caolvchong@gmail.com
开发平台:windows server 2003
测试平台:Firefox 2.0.11,IE6,IE7,基于IE7核心的Maxthon,GreenBrowser
开发工具:Aptana
时间:2007-12-12
首发:http://cceer.xmu.edu.cn/blog/post/toggle.html
版权说明:转载请务必注明上面这段话和出处
项目描述:通过javascript类实现网页区域块伸缩效果的实现.
调用操作:
引用js文件,加入到你需要的网页.(当然,你完全可以使用jQuery,它也有toggle)
在页面载入后(使用window.onload),调用类.例子如下:
id为a的节点要控制id为b的节点.点击a,如果b为关闭则打开,如果b为打开则关闭
window.onload = function(){
var t = new _toggle($.id("b"));
$.id("a").onclick = function(){
t.toggle();
}
}
对于多个节点类似处理
一些特点:
1.支持区域块高度未知情况(比如div高度自适应)
2.支持区域块默认关闭情况(比如div的display开始为none)
3.速度级别可以自定义
4.支持外部css(当然包括内部css)
5.你来帮找找 ^_^
bug汇报:
请联系我的email:caolvchong@gmail.com
下载:toggle.rar 或者toggle.rar
演示:http://finish.3322.org/toggle/index.html

核心代码:toggle.js(代码以下载包为准)
view plaincopy to clipboardprint?
/*------------------------------------------------
* 作者:草履虫
* email:caolvchong@gmail.com
* Version:toggle 1.0 ^_^
* 版权:使用请保留这段信息
* 时间:2007年12月12日
* -----------------------------------------------
*/
var $ ={
style:function(node){
return node.currentStyle || document.defaultView.getComputedStyle(node,null) || node.style;
},
height:function(node){
return parseInt($.style(node).height) || parseInt(node.clientHeight);
},
id:function(node){
return document.getElementById(node);
}
}
function _toggle(node,speed){
this.node = node;
switch(speed){
case "fast":
this.speed = 10;
break;
case "normal":
this.speed = 5;
break;
case "slow":
this.speed = 2;
break;
default:
this.speed =5;
}
this.run = 1;
this.max_height = $.height(this.node);
this.node.style.height = this.max_height;
this.display = $.style(this.node).display;
this.node.style.overflow = "hidden";
if(this.max_height <=0 || this.display == "none"){
this.flag = 1;
}else{
this.flag = -1;
}
}
_toggle.prototype.up_down = function(){
if(this.node.style.display == "none"){
this.node.style.display = "block";
this.node.style.height ="0px";
}
this.box_height = parseInt($.style(this.node).height);
this.box_height -= this.speed * this.flag;
if(this.box_height > this.max_height){
window.clearInterval(this.t);
this.box_height = this.max_height;
this.run =1;
}
if(this.box_height <0){
window.clearInterval(this.t);
this.box_height = 0;
this.node.style.display ="none";
this.run =1;
}
this.node.style.height = this.box_height + "px";
}
_toggle.prototype.toggle = function(){
var temp = this;
if(this.run == 1){
this.flag *= -1;
this.run =0;
this.t = window.setInterval(function(){temp.up_down();},10);
}
}