<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CMenu2</title>
<style type="text/css">
body {
/*设置body背景颜色*/
background-color:#000000;
}
div#CMenu2 {
/*外框*/
text-align:center;
z-index:2;
}
div#CMenu2_Content {
/*设置内容底部的样式*/
background-color:#ACBEC6;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1;
}
div#CMenu2, div#CMenu2_Content {
/*设置整体定位*/
position:absolute;
display:none;
}
div#CMenu2 div.Title {
/*设置标题的样式*/
background-color:#3B94B6;
color:#FFFFFF;
font-weight:bold;
cursor:default;
}
div#CMenu2 div.Content {
/*设置内容对齐方式IE BUG*/
position:relative;
text-align:center;
padding:5px 0px 5px 10px;
}
div#CMenu2 div.Content img {
/*设置内容中所有图片的样式*/
margin-right:10px;
}
div.CMenu2Temp {
/*设置移动框的样式*/
border:#CCCCCC 1px dashed;
position:absolute;
z-index:100;
}
div.CMenu2Text {
/*设置终效果字的样式*/
position:absolute;
z-index:100;
text-align:center;
font-size:14px;
font-weight:bold;
font-family:"黑体";
color:#6699CC;
}
</style>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
var html;
window.IE = /MSIE/.test(window.navigator.userAgent);
if (bool) {
html = window.HTMLElement.prototype;
window.__defineGetter__("event", function () {
//兼容Event对象
var o = arguments.callee;
do {
if (o.arguments[0] instanceof Event) return o.arguments[0];
} while (o = o.caller);
return null;
});
Event.prototype.__defineGetter__("fromElement", function () {
/*
这里:
onmouseover的时候relatedTarget为鼠标离开(onmouseout)的对象
onmouseout的时候relatedTarget为鼠标当前(onmouseover)的对象
*/
return this.relatedTarget;
});
html.contains = function (o) {
do {
if (o == this) return true;
} while (o = o.parentNode);
return false;
};
html.__defineSetter__("className", function (t_v) {
this.setAttribute("class", t_v);
});
html.__defineGetter__("className", function () {
return this.getAttribute("class");
});
}
})(/Firefox/.test(window.navigator.userAgent));
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
var $ni, $nf;
if (b.constructor != Array) { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.attachEvent) a.attachEvent($ni, c);
else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
//删除函数
var $ni, $nf;
if (b.constructor != Array) { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.detachEvent) a.detachEvent($ni, c);
else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
}
});
var CMenu2 = Class.create();
CMenu2.prototype = {
initialize : function (body, $left, $top) {
//初始化参数
var wc = this;
wc.body = body; //整体
wc.property = { left : $left, top : $top }; //记录左边和上边的距离
wc.images = []; //所有的图片元素
wc.t_images = []; //所有缓存图片组
(wc.text = { temp : document.createElement("div"), items : [], ing : false }).temp.className = "CMenu2Text"; //设置字组
wc.title = body[0].childNodes[0] //标题
wc.content = body[0].childNodes[1]; //图片的parentNode元素
wc.titleLeft = 0; //标题距离整体左边的距离
(wc.o_move = { temp : document.createElement("div"), left : 0, top : 0, ing : false }).temp.className = "CMenu2Temp"; //拖拽时临时对象
wc.i_fmove = wc.e_fmove = null; //拖拽的函数引用地址存放
wc.area = 50; //变化范围
},
offset : function (o) {
//设置定位
var $x = $y = 0;
do { $x += o.offsetLeft, $y += o.offsetTop; }
while (o = o.offsetParent);
return { x : $x, y : $y };
},
reMouse : function () {
//返回鼠标绝对位置
var e = window.event;
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
load_image : function (url) {
//加载图片
return (new Image).src = url;
},
load : function (ary) {
//加载-创建图片及执行初始化参数
var wc = this, imgs = wc.images, width = 0, oimg, i;
for (i = 0 ; i < ary.length ; i ++) {
oimg = document.createElement("img"); //创建图片
oimg.src = (wc.t_images[i] = [wc.load_image(ary[i][0]), wc.load_image(ary[i][1])])[0]; //设置链接
oimg.align = "top", oimg.onclick = ary[i][5]; //设置对齐和点击事件
with (oimg.style) { width = ary[i][2] + "px", height = ary[i][3] + "px"; }; //设置高宽(加载时避免变形)
wc.content.appendChild(
(imgs[i] = { img : oimg, width : ary[i][2], height : ary[i][3] }).img //设置图片对象组,返回图片追加到内容
);
width += ary[i][2]; //设置宽度
wc.text.items[i] = ary[i][4]; //设置字体组
}
wc.init_body(width); //设置宽度
wc.set_titleStyle(); //设置标题样式
wc.titleLeft = wc.offset(wc.title).x - wc.offset(wc.body[0]).x; //设置标题距离整体的距离
wc.set_position(wc.property.left, wc.property.top); //设置位置
wc.content.onmousemove = wc.c_move.bind(wc); //设置动画
wc.content.onmouseout = wc.c_out.bind(wc); //设置还原大小
wc.title.onmousedown = wc.s_move.bind(wc); //设置拖拽
},
init_body : function (width) {
//初始化菜单位置
var wc = this, body = wc.body[0], background = wc.body[1], title = wc.title, content = wc.content;
body.style.display = background.style.display = "block"; //设置显示
title.style.width = content.offsetWidth + "px"; //设置标题和内容的宽度
body.style.width = content.offsetWidth + width + "px"; //设置整体的宽度
title.style.margin = "auto"; //设置标题居中
background.style.width = title.offsetWidth + "px"; //设置背景的宽度
background.style.height = content.offsetHeight + "px"; //设置背景的高度
},
set_titleStyle : function () {
//设置标题样式 因为从CSS设置标题的高度会导致整体宽度自适应为100%所以只好从这里设置了
var wc = this, title = wc.title;
with (title.style) {
height = lineHeight = "30px";
}
},
set_position : function (a_x, a_y) {
//设置位置
var wc = this;
with (wc.body[0].style) { left = a_x - wc.titleLeft + "px", top = a_y + "px"; } //设置整体
with (wc.body[1].style) { left = wc.offset(wc.title).x + "px", top = a_y + wc.title.offsetHeight + "px"; } //设置背景
},
c_move : function () {
//鼠标移动的时候变化图片大小
var wc = this, mos = wc.reMouse(), cnt = wc.content, imgs = wc.images, t_imgs = wc.t_images, text = wc.text,
obj, tobj = { o : null, i : 0 }, pos, img, num, i;
if (wc.o_move.ing) return;
for (i = 0 ; i < imgs.length ; i ++) {
obj = imgs[i], img = obj.img,
num = (1 - Math.min(Math.abs(mos.x - wc.offset(img).x - img.offsetWidth / 2), wc.area) / wc.area);
//用1减去鼠标到图片的距离的绝对值,在除以距离得到百分比,然后分别乘以元素的高和宽得到增加数
img.style.width = obj.width + Math.round(num * obj.width) + "px";
img.style.height = obj.height + Math.round(num * obj.height) + "px";
img.style.marginTop = Math.round(num * 10) + "px";
if (num > 0.85) { tobj.o = img, tobj.i = i; } //控制字体
if (num > 0.5) { //换图
if (img.src != t_imgs[i][1]) img.src = t_imgs[i][1];
} else {
if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0];
}
}
if (tobj.o) {
//设置字体
if (!text.ing) document.body.appendChild(text.temp);
pos = wc.offset(tobj.o), text.ing = true;
text.temp.innerHTML = text.items[tobj.i];
with (text.temp.style) {
left = pos.x + tobj.o.offsetWidth / 2 - text.temp.offsetWidth / 2 + "px";
top = pos.y + tobj.o.offsetHeight + 7 + "px";
}
} else if (text.ing) {
//删除字体
text.temp.parentNode.removeChild(text.temp);
text.ing = false;
}
},
c_out : function () {
//鼠标离开的时候设置恢复
var wc = this, e = window.event, imgs = wc.images, t_imgs = wc.t_images, i;
if (wc.content.contains(e.toElement || e.fromElement)) return;
for (i = 0 ; i < imgs.length ; i ++) {
with (imgs[i]) {
img.style.width = width + "px", img.style.height = height + "px", img.style.marginTop = "0px"; //恢复大小
if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0]; //恢复图片地址
}
}
if (wc.text.ing) {
//删除字体
wc.text.temp.parentNode.removeChild(wc.text.temp);
wc.text.ing = false;
}
},
s_move : function () {
//鼠标按下...
var wc = this, mos = wc.reMouse(), tit = wc.title, pos = wc.offset(tit);
if (wc.i_fmove || wc.e_fmove) return;
with (wc.o_move) {
left = mos.x - pos.x, top = mos.y - pos.y;
with (temp.style) {
left = pos.x - 1 + "px", top = pos.y - 1 + "px";
width = tit.offsetWidth + "px", height = tit.offsetHeight + "px";
}
document.body.appendChild(temp);
ing = true;
}
wc.i_fmove = Object.addEvent(document, "onmousemove", wc.i_move.bind(wc));
wc.e_fmove = Object.addEvent(document, "onmouseup", wc.e_move.bind(wc));
},
i_move : function () {
//鼠标移动中...
var wc = this, mos = wc.reMouse(), obj = wc.o_move;
with (obj.temp.style) {
left = mos.x - obj.left + "px", top = mos.y - obj.top + "px";
}
if (window.IE) obj.temp.setCapture(); //为了拽出浏览器
try {
//拖拽时清除selection ranges对象
if (document.selection) document.selection.empty();
else window.getSelection().removeAllRanges();
} catch (exp) {}
},
e_move : function () {
//鼠标松开...
var wc = this, obj = wc.o_move.temp, pos = wc.offset(obj);
wc.set_position(wc.property.left = pos.x + 1, wc.property.top = pos.y + 1);
if (window.IE) obj.releaseCapture(); //为了拽出浏览器
obj.parentNode.removeChild(obj);
wc.o_move.ing = false;
Object.delEvent(document, "onmousemove", wc.i_fmove);
Object.delEvent(document, "onmouseup", wc.e_fmove);
wc.i_fmove = wc.e_fmove = null;
}
};
window.onload = function () {
var wc = new CMenu2([$("CMenu2"), $("CMenu2_Content")], 20, 5);
wc.load([
//默认小图路径,变化中换成相对大图路径,宽,高,终效果文字显示,点击后执行函数
["CMenu2/1.gif", "CMenu2/11.gif", 21, 23, "大界面", function () { alert("1号"); }],
["CMenu2/2.gif", "CMenu2/12.gif", 19, 21, "桌面日历", function () { alert("2号"); }],
["CMenu2/3.gif", "CMenu2/13.gif", 19, 21, "事件列表", function () { alert("3号"); }],
["CMenu2/4.gif", "CMenu2/14.gif", 21, 21, "添加事件", function () { alert("4号"); }],
["CMenu2/5.gif", "CMenu2/15.gif", 23, 24, "管理", function () { alert("5号"); }],
["CMenu2/6.gif", "CMenu2/16.gif", 18, 18, "退出", function () { window.opener = null; window.close(); }]
]);
};
</script>
</head>
<body>
<br />
<!--CMenu2菜单 开始-->
<div id="CMenu2"><div class="Title">标题</div><div class="Content"></div></div>
<div id="CMenu2_Content"></div>
<!--CMenu2菜单 结束-->
<div id="status" style="color:#FFFFFF"></div>
</body>
</html>