WordPress 탐색 menu_php 스킬의 스크롤 및 페이드 효과 구현을 위한 핵심 사항

스크롤 탐색 메뉴
스크롤 메뉴는 이름에서 알 수 있듯이 스크롤 방식으로 메뉴를 표시하고 숨깁니다. 실제로 페이드 메뉴와 스크롤 메뉴의 원리는 동일합니다. 후자가 메뉴의 높이를 변경하는 경우, 후자의 처리가 전자보다 어려운 이유는 바로 메뉴 높이 처리에 투명성보다 더 높은 기술이 필요하기 때문입니다. 그리고 무엇이 어려운지.

초기화 처리
보다 유연한 처리를 위해서는 슬라이딩 속도를 매개변수로 정의해야 합니다. 즉, 각 단위 시간 간격마다 메뉴 높이가 변경됩니다. 또한 메뉴의 초기 높이를 설정해야 합니다. 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);

탐색 메뉴 페이드 인 및 아웃

작업 구현
이전 분석은 좀 장황합니다. 코드를 살펴보겠습니다. :) 변경 사항을 강조하기 위해 코드에 몇 가지 로그를 추가했습니다.

초기화

초기 불투명도는 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 + ')');
}