滚动导航菜单
滚动菜单, 望文生义是以滚动的形式显示和暗藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事情的时分扭转菜单的通明度, 然后者则是扭转菜单的高度. 那为什么后者的解决难度会比前者高呢? 这正由于菜单高度的解决比通明度有更高的技巧要求. 上面咱们就探讨一下该如何解决, 并难在什么中央.

初期化解决
为了解决愈加灵敏, 咱们需求为它定义一个作为参数的滑动速度, 也就是每一个单位工夫距离, 菜单高度的扭转幅度. 另外, 咱们需求将菜单的初始高度定为 0.

// 速度来自参数, 默许没个工夫单位挪动 10px
this.speed = speed || 10;
// 设定初始化高度
this.util.setStyle(this.body, 'height', '0');

开展和折叠
开展和折叠的办法对应淡入淡出菜单的增强和减小不通明度, 只是解决对象不一样, 原理是一样的. 要留意将获取的高度转为整型再进行计算.

expand: function() {
 // 获取以后高度, 并整型化
 var height = 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() {
 // 获取以后高度, 并整型化
 var height = 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 款式中的高度并前往, 当款式为空时才会去获取元素的实际高度. 所以有以下代码:

// 取得初始高度, 当鼠标在菜单题目上时取得开展时的初始高度, 当鼠标在菜单体上时获得菜单的实际高度
var initHeight = 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() {
 // 获取以后菜单体的地位
 var pos = this.util.cumulativeOffset(this.title);
 var left = pos[0];
 var top = 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 + ')');
}

以上就是安达网络工作室关于《WordPress导航菜单的滚动和淡入淡出效果的实现要点》的一些看法。更多内容请查看本栏目更多内容！