WordPress导航菜单的滚动和淡入淡出效果的实现要点


Posted in PHP onDecember 14, 2015

滚动导航菜单
滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.

初期化处理
为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 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 + ')');
}
PHP 相关文章推荐
php网站地图生成类示例
Jan 13 PHP
PHP使用静态方法的几个注意事项
Sep 16 PHP
PHP的Yii框架的基本使用示例
Aug 21 PHP
PHP编写RESTful接口的方法
Feb 21 PHP
PHP搭建大文件切割分块上传功能示例
Jan 04 PHP
Zend Framework基于Command命令行建立ZF项目的方法
Feb 18 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
Mar 15 PHP
浅谈关于PHP解决图片无损压缩的问题
Sep 01 PHP
php把字符串指定字符分割成数组的方法
Mar 12 PHP
PHP简单实现正则匹配省市区的方法
Apr 13 PHP
使用ucenter实现多站点同步登录的讲解
Mar 21 PHP
php连接mysql数据库最简单的实现方法
Sep 24 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
Dec 14 #PHP
Yii2隐藏frontend/web和backend/web的方法
Dec 12 #PHP
使用PHP+AJAX让WordPress动态加载文章的教程
Dec 11 #PHP
WordPress中制作导航菜单的PHP核心方法讲解
Dec 11 #PHP
搭建Vim为自定义的PHP开发工具的一些技巧
Dec 11 #PHP
PHP开发中AJAX技术的简单应用
Dec 11 #PHP
基于PHP如何把汉字转化为拼音
Dec 11 #PHP
You might like
PHP小教程之实现双向链表
2014/06/12 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python进程间通信之共享内存详解
2017/10/30 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python 随机按键模拟2小时
2020/12/30 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
决心书范文
2014/03/11 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
上甘岭观后感
2015/06/10 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server