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开发中的安全防范知识详解
Jun 06 PHP
PHP垃圾回收机制引用计数器概念分析
Jun 24 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
Mar 19 PHP
PHP中使用BigMap实例
Mar 30 PHP
php自动识别文字编码并转换为目标编码的方法
Aug 08 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
Oct 27 PHP
PHP常用的三种设计模式
Feb 17 PHP
Laravel中log无法写入问题的解决
Jun 17 PHP
yii2 上传图片的示例代码
Nov 02 PHP
PHP实现对数字分隔加千分号的方法
Mar 18 PHP
Yii框架操作cookie与session的方法实例详解
Sep 04 PHP
thinkPHP框架乐观锁和悲观锁实例分析
Oct 30 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
Oracle 常见问题解答
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php自定义session示例分享
2014/04/22 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Vue实现菜单切换功能
2020/11/08 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python安装教程
2018/02/28 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
网站编辑求职信
2013/10/17 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
学生打架检讨书
2014/02/14 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
美食节目策划方案
2014/05/31 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
小升初自荐信范文
2015/03/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
合作意向书范本
2019/04/17 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL