WordPress导航菜单的滚动和淡入淡出效果的实现要点
发布时间：2020-12-12 21:12:54 所属栏目：PHP教程 来源：网络整理
导读：滚动导航菜单 滚动菜单,顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的,前者是在触发事件的时候改变菜单的透明度,而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有
滚动导航菜单滚动菜单,顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的,前者是在触发事件的时候改变菜单的透明度,而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理,并难在什么地方.初期化处理 为了处理更加灵活,我们需要为它定义一个作为参数的滑动速度,也就是每一个单位时间间隔,菜单高度的改变幅度. 另外,我们需要将菜单的初始高度定为 0. 展开和折叠 展开和折叠的方法对应淡入淡出菜单的加强和减小不透明度,只是处理对象不一样,原理是一样的. 要注意将获取的高度转为整型再进行计算. = this.height) {
height = this.height;
// 取消循环调用
clearTimeout(this.tid);
}
// 重新设定菜单高度
this.util.setStyle(this.body,height + 'px');
}
/**
激活菜单的瞬间 十分十分十分重要,滚动菜单中最具技巧,也最有意思的一部分. 本程序中,我对获取高度的方法进行了封装,获取高度其实是返回元素的 offsetHeight. 按我的理解 (不知道是否正确),offsetHeight 会优先去获取 CSS 样式中的高度并返回,当样式为空时才会去获取元素的实际高度. 所以有以下代码: 淡出淡入导航菜单实施操作前面的分析说得有点啰嗦了,还是看看代码吧. :) 为了突出改动的部分,我在代码中加入了一些 Log. 初始化 初始不透明度为 0,而最大不透明度为被设定值或者 1. 激活 先进行前期处理,再对菜单的透明度进行处理. // 定义激活时样式
this.util.setStyle(this.body,'left',left + 'px'); this.util.setStyle(this.body,'top',top + 'px'); this.util.setStyle(this.body,'visible'); this.util.setStyle(this.body,'opacity',this.opacity); this.util.setStyle(this.body,'filter','alpha(opacity=' + this.opacity * 100 + ')'); if(this.tid) { 加强菜单的不透明度,直到透明度到达最大不透明度. = this.maxopacity) {
this.opacity = this.maxopacity;
// 取消循环调用
clearTimeout(this.tid);
}
// 重新设定透明度
this.util.setStyle(this.body,'alpha(opacity=' + this.opacity * 100 + ')');
}
解除 对菜单的透明度进行处理. 减弱菜单的不透明度,直到透明度为 0 并隐藏菜单. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |