网站地图
【www.gdgbn.com--WordPress】
以 wordpress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php教程 和 style.css教程, 添加了文件 js/menu.js
/** 类 */
var class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
/** 菜单列表 */
var menulist = class.create();
menulist.prototype = {
/**
* 构造方法
* id: 菜单列表
* opacity: 不透明度 (0.0 - 1.0, 0.0 为全透明, 1.0 为不透明)
*/
initialize: function(id, opacity) {
// 获取菜单列表
this.obj = document.getelementbyid(id);
if (!this.obj) { return; }
// 对菜单列表内的所有菜单进行处理
var menus = this.obj.childnodes;
for (var i = 0; i < menus.length; i++) {
var menu = menus[i];
if (menu.tagname == "li") {
// 构建菜单
new menu(menu, opacity);
}
}
}
}
/** 菜单 */
var menu = class.create();
menu.prototype = {
/**
* 构造方法
* target: 目标菜单
* opacity: 不透明度 (0.0 - 1.0, 0.0 为全透明, 1.0 为不透明)
*/
initialize: function(target, opacity) {
this.util = new menuutil();
// 获取目标菜单 (没多余元素)
this.obj = this.util.cleanwhitespace(target);
/* shade 2008/09/01 change start */
// 定义透明度, 默认透明
this.opacity = 0;
this.maxopacity = opacity || 1;
/* shade 2008/09/01 change end */
// 获取菜单
this.menu = this.obj.childnodes
// 重要! 如果菜单不包含菜单项, 则不进行处理
if (this.menu.length < 2) { return; }
// 菜单标题和菜单体
this.title = this.menu[0];
this.body = this.menu[1];
// 定义初始样式
this.util.setstyle(this.body, "visibility", "hidden");
this.util.setstyle(this.body, "position", "absolute");
this.util.setstyle(this.body, "overflow", "hidden");
this.util.setstyle(this.body, "display", "block");
// 添加监听器
this.addlistener(this.obj, "mouseo教程ver", this.util.bind(this, this.activate), false);
this.addlistener(this.obj, "mouseout", this.util.bind(this, this.deactivate), false);
},
/**
* 激活方法
* 当鼠标移动到菜单标题是激活
*/
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 + ")");
/* shade 2008/09/01 add start */
if(this.tid) {
cleartimeout(this.tid);
}
// 不断加强菜单的不透明度
this.tid = setinterval(this.util.bind(this, this.appear), 30);
/* shade 2008/09/01 add end */
},
/**
* 解除方法
* 当鼠标移动出菜单标题是激活
*/
deactivate: function(){
/* shade 2008/09/01 add start */
if(this.tid) {
cleartimeout(this.tid);
}
// 不断减弱菜单的不透明度
this.tid = setinterval(this.util.bind(this, this.fade), 30);
/* shade 2008/09/01 add end */
/* shade 2008/09/01 delete start */
// 定义解除时样式
//this.util.setstyle(this.body, "visibility", "hidden");
/* shade 2008/09/01 delete end */
},
/* shade 2008/09/01 add start */
/**
* 加强不透明度, 直到最大不透明度
*/
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 + ")");
},
/**
* 减小不透明度, 直到完全透明隐藏菜单
*/
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 + ")");
},
/* shade 2008/09/01 add end */
/**
* 监听方法
* element: 监听对象
* name: 监听方法
* observer: 执行的方法
* usecapture: 浏览器调用事件的方式 (true 为 capture 方式, false 为 bubbling 方式)
*/
addlistener: function(element, name, observer, usecapture) {
if(element.addeventlistener) {
element.addeventlistener(name, observer, usecapture);
} else if(element.attachevent) {
element.attachevent("on" + name, observer);
}
}
}
/** 一些实用的方法 */
var menuutil = class.create();
menuutil.prototype = {
initialize: function() {
},
$: function(id) {
return document.getelementbyid(id);
},
$a: function(iterable) {
if(!iterable) {
return [];
}
if(iterable.toarray) {
return iterable.toarray();
} else {
var results = [];
for(var i = 0; i < iterable.length; i++) {
results.push(iterable[i]);
}
return results;
}
},
bind: function() {
var array = this.$a(arguments);
var func = array[array.length - 1];
var _method = func, args = array, object = args.shift();
return function() {
return _method.apply(object, args.concat(array));
}
},
getheight: function(element) {
return element.offsetheight;
},
setstyle: function(element, key, value) {
element.style[key] = value;
},
getstyle: function(element, key) {
return element.style[key];
},
cleanwhitespace: function(list) {
var node = list.firstchild;
while (node) {
var nextnode = node.nextsibling;
if(node.nodetype == 3 && !/s/.test(node.nodevalue)) {
list.removechild(node);
}
node = nextnode;
}
return list;
},
cumulativeoffset: function(element) {
var valuet = 0, valuel = 0;
do {
valuet += element.offsettop || 0;
valuel += element.offsetleft || 0;
element = element.offsetparent;
} while (element);
return [valuel, valuet];
}
}
/** 添加到页面加载事件 */
window.onload = function(e) {
new menulist("menus", 0.9);
}