WordPress导航菜单的滚动和淡入淡出效果的实现要点
滚动导航菜单
滚动菜单,顾名思义是以滚动的方式显示和隐藏菜单的.其实跟淡入淡出菜单和滚动菜单的原理是一样的,前者是在触发事件的时候改变菜单的透明度,而后者则是改变菜单的高度.那为什么后者的处理难度会比前者高呢?这正因为菜单高度的处理比透明度有更高的技巧要求.下面我们就讨论一下该如何处理,并难在什么地方.
初期化处理
为了处理更加灵活,我们需要为它定义一个作为参数的滑动速度,也就是每一个单位时间间隔,菜单高度的改变幅度.另外,我们需要将菜单的初始高度定为0.
//速度来自参数,默认没个时间单位移动10px this.speed=speed||10; //设定初始化高度 this.util.setStyle(this.body,'height','0');
展开和折叠
展开和折叠的方法对应淡入淡出菜单的加强和减小不透明度,只是处理对象不一样,原理是一样的.要注意将获取的高度转为整型再进行计算.
expand:function(){
//获取当前高度,并整型化
varheight=parseInt(this.util.getStyle(this.body,'height'));
//在时间单位内加上速度,直到高度等于或超过最大高度
height+=this.speed;
if(height>=this.height){
height=this.height;
//取消循环调用
clearTimeout(this.tid);
}
//重新设定菜单高度
this.util.setStyle(this.body,'height',height+'px');
}
/**
*折叠菜单,直到高度为1时隐藏菜单
*/
collapse:function(){
//获取当前高度,并整型化
varheight=parseInt(this.util.getStyle(this.body,'height'));
//在时间单位内减去速度,直到高度等于或小于1
height-=this.speed;
if(height<=1){
height=1;
//隐藏菜单
this.util.setStyle(this.body,'visibility','hidden');
//取消循环调用
clearTimeout(this.tid);
}
//重新设定菜单高度
this.util.setStyle(this.body,'height',height+'px');
}
激活菜单的瞬间
十分十分十分重要,滚动菜单中最具技巧,也最有意思的一部分.
本程序中,我对获取高度的方法进行了封装,获取高度其实是返回元素的offsetHeight.按我的理解(不知道是否正确),offsetHeight会优先去获取CSS样式中的高度并返回,当样式为空时才会去获取元素的实际高度.所以有以下代码:
//获得初始高度,当鼠标在菜单标题上时获得展开时的初始高度,当鼠标在菜单体上时取得菜单的实际高度 varinitHeight=this.util.getStyle(this.body,'height'); //获得实际高度,必须先清空样式的高度,否则只会得到样式中的高度 this.util.setStyle(this.body,'height',''); this.height=this.util.getHeight(this.body); //重新设定初始高度 this.util.setStyle(this.body,'height',initHeight);
淡出淡入导航菜单
实施操作
前面的分析说得有点啰嗦了,还是看看代码吧.:)为了突出改动的部分,我在代码中加入了一些Log.
初始化
初始不透明度为0,而最大不透明度为被设定值或者1.
//定义透明度,默认透明 this.opacity=0; this.maxopacity=opacity||1;
激活
先进行前期处理,再对菜单的透明度进行处理.
/**
*激活方法
*当鼠标移动到菜单标题是激活
*/
activate:function(){
//获取当前菜单体的位置
varpos=this.util.cumulativeOffset(this.title);
varleft=pos[0];
vartop=pos[1]+this.util.getHeight(this.title);
//定义激活时样式
this.util.setStyle(this.body,'left',left+'px');
this.util.setStyle(this.body,'top',top+'px');
this.util.setStyle(this.body,'visibility','visible');
this.util.setStyle(this.body,'opacity',this.opacity);
this.util.setStyle(this.body,'filter','alpha(opacity='+this.opacity*100+')');
if(this.tid){
clearTimeout(this.tid);
}
//不断加强菜单的不透明度
this.tid=setInterval(this.util.bind(this,this.appear),30);
}
加强菜单的不透明度,直到透明度到达最大不透明度.
/**
*加强不透明度,直到最大不透明度
*/
appear:function(){
this.opacity+=0.1;
if(this.opacity>=this.maxopacity){
this.opacity=this.maxopacity;
//取消循环调用
clearTimeout(this.tid);
}
//重新设定透明度
this.util.setStyle(this.body,'opacity',this.opacity);
this.util.setStyle(this.body,'filter','alpha(opacity='+this.opacity*100+')');
}
解除
对菜单的透明度进行处理.
/**
*解除方法
*当鼠标移动出菜单标题是激活
*/
deactivate:function(){
if(this.tid){
clearTimeout(this.tid);
}
//不断减弱菜单的不透明度
this.tid=setInterval(this.util.bind(this,this.fade),30);
}
减弱菜单的不透明度,直到透明度为0并隐藏菜单.
/**
*减小不透明度,直到完全透明隐藏菜单
*/
fade:function(){
this.opacity-=0.1;
if(this.opacity<=0){
this.opacity=0;
//隐藏菜单
this.util.setStyle(this.body,'visibility','hidden');
//取消循环调用
clearTimeout(this.tid);
}
//重新设定透明度
this.util.setStyle(this.body,'opacity',this.opacity);
this.util.setStyle(this.body,'filter','alpha(opacity='+this.opacity*100+')');
}