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 相关文章推荐
第1次亲密接触PHP5(1)
Oct 09 PHP
php切割页面div内容的实现代码分享
Jul 31 PHP
Smarty模板变量调节器用法分析
May 23 PHP
PHP防止图片盗用(盗链)的方法小结
Nov 11 PHP
Yii2下点击验证码的切换实例代码
Mar 14 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
May 24 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
Sep 20 PHP
php+redis消息队列实现抢购功能
Feb 08 PHP
php无限级分类实现评论及回复功能
Feb 18 PHP
PHP小程序支付功能完整版【基于thinkPHP】
Mar 26 PHP
PHP 构造函数和析构函数原理与用法分析
Apr 21 PHP
php+laravel 扫码二维码签到功能
May 15 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/12/31 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
Js基础学习资料
2010/11/23 Javascript
js函数排序的实例代码
2013/07/01 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
js实现蒙版效果
2020/01/11 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python实现的config文件读写功能示例
2019/09/24 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
演讲比赛通讯稿
2015/07/18 职场文书