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 Image Resize图片大小调整的函数代码
Jan 17 PHP
thinkphp获取栏目和文章当前位置的方法
Oct 29 PHP
php截取字符串函数分享
Feb 02 PHP
php简单生成随机数的方法
Jul 30 PHP
php中switch语句用法详解
Aug 17 PHP
Zend Framework教程之配置文件application.ini解析
Mar 10 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
Jul 28 PHP
php的socket编程详解
Nov 20 PHP
微信公众号模板消息群发php代码示例
Dec 29 PHP
删除PHP数组中的重复元素的实现代码
Apr 10 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
Nov 06 PHP
PHP join()函数用法与实例讲解
Mar 11 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实现框架(一)
2006/10/09 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python中的多重装饰器
2015/04/11 Python
python删除列表中重复记录的方法
2015/04/28 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python缩进长度是否统一
2020/08/02 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
.net软件工程师面试题
2015/03/31 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
班级安全教育实施方案
2014/02/23 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
MySQL 数据 data 基本操作
2022/05/04 MySQL