 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| js实现div区域块伸缩效果(toggle) |
| 来源：蓝色理想 更新时间：2010/8/30 10:06:52 阅读次数： 我要投稿 |
|
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);
}
} |
| 特效说明： |
| js实现div区域块伸缩效果(toggle) |
|
| 上一篇文章： 轻便易用的JavaScript动态表格下一篇文章： js弹出层组件artDialog2.1正式版 |
|
|
|
注册 登录
