欢迎光临
我们一直在努力

JS动态下拉函数(类似jquery中的slideDown、slideUp)

一直做项目的时候总是比较习惯性的用Jquery!而最近在改版一个网站的时候在这个网站中需要加入动态下拉菜单效果!引入Jquery类库的话几行代码就OK了~~!但是总不能为了这么一个小小的功能而去引用一个将近60K的jQuery!所以只有自己写了一个类:

 var slide = function(id,timelen){
this.Objs = document.getElementById(id);
this.Objs.style.overflow = "hidden";
this.timelength = timelen;
var isNone = false;
if(getStyle(id,"display")=='none'){
this.Objs.style.display='block';
this.Objs.style.visibility="hidden";
isNone = true;
}
this.paddingTop = getStyle(id,"paddingTop");
this.paddingBottom = getStyle(id,"paddingBottom");
this.Objs.style.paddingTop=0;
this.Objs.style.paddingBottom=0;
this.contentheight = parseInt(getStyle(id,"height"));
if (isNaN(this.contentheight)){
this.contentheight = parseInt(this.Objs.offsetHeight);
}
if(isNone){
this.Objs.style.height=0;
}else{
this.Objs.style.paddingTop=this.paddingTop;
this.Objs.style.paddingBottom=this.paddingBottom;
this.Objs.style.height=this.contentheight+'px';
}
}
slide.prototype.engine = function(direction) {
var elapsed = new Date().getTime() - this.startTime;
var thisobj=this;
if (elapsed < this.timelength) {
var distancepercent;
if(direction == "down"){
this.Objs.style.visibility="visible";
distancepercent = (1-Math.cos(elapsed/this.timelength*Math.PI))/2;
}else{
distancepercent = 1 - (1-Math.cos(elapsed/this.timelength*Math.PI))/2;
}
this.Objs.style.height = distancepercent * this.contentheight + "px";
this.runtimer = setTimeout(function(){
thisobj.engine(direction);
},10);
} else {
if(direction == "down"){
this.Objs.style.paddingTop=this.paddingTop;
this.Objs.style.paddingBottom=this.paddingBottom;
this.Objs.style.height = this.contentheight + "px";
}else{
this.Objs.style.height = 0 ;
this.Objs.style.visibility="hidden";
}
this.runtimer = null;
}
}
slide.prototype.slideDown = function() {
if (typeof this.runtimer == "undefined" || this.runtimer == null) {
if (parseInt(this.Objs.style.height)==0){
this.startTime = new Date().getTime();
this.engine("down");
}
}
}
slide.prototype.slideUp = function() {
if (typeof this.runtimer == "undefined" || this.runtimer == null) {
if (parseInt(this.Objs.style.height)==this.contentheight){
this.startTime = new Date().getTime() ;
this.engine("up");
}
}
}

调用的话其实也非常的简单,如下

var menu=new slide('id',200);//创建对象  id:菜单区域的ID 200:这个参数为下拉时间越小速度越快
menu.slideDown();  //调用下拉
menu.slideUp(); //调用关闭
赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » JS动态下拉函数(类似jquery中的slideDown、slideUp)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址