项目:区域块伸缩效果实现(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.你来帮找找 ^_^

程序演示：toggle.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);   
    }   
}  
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);
 }
}

下载地址：toggle.rar （1.95 KB）