WordPress导航菜单的滚动和淡入淡出效果的实现要点
滚动导航菜单
滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.
初期化处理
为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 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网站由于下载的插件存在恶意代码,导致整个服务器所有网站PHP文件都存在恶意代码,就写了个简单的脚本清除。恶意代码示例...2015-10-23
深入解析WordPress中加载模板的get_template_part函数
这篇文章主要介绍了WordPress中加载模板的get_template_part函数,其中重点讲解了其函数钩子的使用,需要的朋友可以参考下...2016-01-14- WordPress插件的加载顺序其实对于很多朋友来讲都没有必要如何来操作了,但有时安装插件太多了我们需要设置一顺序了那么要如何来安装呢,下面来看看. 默认的情况下,Word...2016-11-25
- 这篇文章主要介绍了WordPress中用于获取文章作者与分类信息的方法整理,都是来自于WordPress的WP_Query类之下,需要的朋友可以参考下...2015-12-21
- 这篇文章主要介绍了WordPress中获取所使用的模板的页面ID的简单方法,通过这个方法来获取页面的链接是比较方便的,需要的朋友可以参考下...2016-01-04
- 这篇文章主要介绍了在WordPress的后台中添加顶级菜单和子菜单的函数详解,需要的朋友可以参考下...2016-01-14
- 这篇文章主要介绍了WordPress中用于检索模版的相关PHP函数使用解析,包括索模板的函数的使用,要的朋友可以参考下...2015-12-17
- 这篇文章主要介绍了编写PHP脚本来实现WordPress中评论分页的功能的方法,包括上一页下一页和导航式分页功能的添加,需要的朋友可以参考下...2015-12-14
- 这篇文章主要介绍了WordPress后台中实现图片上传功能的实例讲解,包括多个图片上传表单功能的实现,需要的朋友可以参考下...2016-01-14
- 这篇文章主要介绍了WordPress中用于创建以及获取侧边栏的PHP函数讲解,分别为register_sidebar()函数和get_sidebar()的使用,需要的朋友可以参考下...2016-01-02
WordPress中获取页面链接和标题的相关PHP函数用法解析
这篇文章主要介绍了WordPress中获取页面链接和标题的相关PHP函数用法解析,分别为get_permalink()和wp_title()函数的使用,需要的朋友可以参考下...2015-12-21- 这篇文章主要介绍了WordPress中邮件的一些修改和自定义技巧,包括更改邮件为HTML形式以及定义SMTP邮件的发件人的方法,需要的朋友可以参考下...2015-12-17
- 这篇文章主要介绍了在WordPress中实现发送http请求的相关函数解析,包括使用WP_Http类中的函数来发送post或get请求的方法,需要的朋友可以参考下...2016-01-02
解析WordPress中的post_class与get_post_class函数
这篇文章主要介绍了WordPress中的post_class与get_post_class函数,包括post_class()的PHP源码的相应介绍,需要的朋友可以参考下...2016-01-07解析WordPress中控制用户登陆和判断用户登陆的PHP函数
这篇文章主要介绍了WordPress中控制用户登陆和判断用户登陆的PHP函数,WordPress现在多用户功能已推出了一段时间,针对多用户需求的开发也日益增多,需要的朋友可以参考下...2016-03-07详解WordPress中分类函数wp_list_categories的使用
这篇文章主要介绍了详解WordPress中分类函数wp_list_categories的使用,文中罗列其主要参数的功能和写法,需要的朋友可以参考下...2016-01-07- 这篇文章主要介绍了WordPress中编写自定义字段的相关PHP函数解析,包括对不可见的自定义字段的相关介绍,需要的朋友可以参考下...2015-12-27
配置解决Nginx服务器中WordPress路径不自动加斜杠问题
这篇文章主要介绍了配置解决Nginx服务器中WordPress路径不自动加斜杠问题,nginx不会自动在请求的最后加上一个斜线的问题文中也有提到通用的规则改写方法,需要的朋友可以参考下...2016-01-27- 这篇文章主要介绍了在WordPress中获取数据库字段内容和添加主题设置菜单的方法,分别讲解了get_option()函数和add_theme_page()函数的用法,需要的朋友可以参考下...2016-01-14
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
这篇文章主要介绍了CentOS下搭建PHP环境与WordPress博客程序的全流程总结,这里我们以Apache服务器程序和MySQL数据库程序为例进行讲解,需要的朋友可以参考下...2016-05-10