模拟腾讯日历菜单特效。
收集一个很不错的菜单，兼容浏览器.linklink/Files/xxcainiao/xx.rar
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>CMenu2</title>
6
<style type="text/css">
7
body {
8/*设置body背景颜色*/
9
background-color:#000000;
10
}
11
12div#CMenu2 {
13/*外框*/
14 text-align:center;
15 z-index:2;
16}
17
18div#CMenu2_Content {
19/*设置内容底部的样式*/
20 background-color:#ACBEC6;
21 filter:alpha(opacity=50);
22 opacity:0.5;
23 z-index:1;
24}
25
26div#CMenu2, div#CMenu2_Content {
27/*设置整体定位*/
28 position:absolute;
29 display:none;
30}
31
32div#CMenu2 div.Title {
33/*设置标题的样式*/
34 background-color:#3B94B6;
35 color:#FFFFFF;
36 font-weight:bold;
37 cursor:default;
38}
39
40div#CMenu2 div.Content {
41/*设置内容对齐方式IE BUG*/
42 position:relative;
43 text-align:center;
44 padding:5px 0px 5px 10px;
45}
46
47div#CMenu2 div.Content img {
48/*设置内容中所有图片的样式*/
49 margin-right:10px;
50}
51
52div.CMenu2Temp {
53/*设置移动框的样式*/
54 border:#CCCCCC 1px dashed;
55 position:absolute;
56 z-index:100;
57}
58div.CMenu2Text {
59/*设置终效果字的样式*/
60 position:absolute;
61 z-index:100;
62 text-align:center;
63 font-size:14px;
64 font-weight:bold;
65 font-family:"黑体";
66 color:#6699CC;
67
}
68</style>
69<script type="text/javascript">
70(function (bool) {
71//兼容FF一些方法
72 var html;
73
74 window.IE = /MSIE/.test(window.navigator.userAgent);
75
76 if (bool) {
77
78 html = window.HTMLElement.prototype;
79
80 window.__defineGetter__("event", function () {
81 //兼容Event对象
82 var o = arguments.callee;
83
84 do {
85 if (o.arguments[0] instanceof Event) return o.arguments[0];
86 } while (o = o.caller);
87
88 return null;
89 });
90
91 Event.prototype.__defineGetter__("fromElement", function () {
92 /*
93 这里：
94 onmouseover的时候relatedTarget为鼠标离开（onmouseout）的对象
95 onmouseout的时候relatedTarget为鼠标当前（onmouseover）的对象
96 */
97 return this.relatedTarget;
98
99 });
100
101 html.contains = function (o) {
102 do {
103 if (o == this) return true;
104 } while (o = o.parentNode);
105 return false;
106 };
107
108 html.__defineSetter__("className", function (t_v) {
109 this.setAttribute("class", t_v);
110 });
111
112 html.__defineGetter__("className", function () {
113 return this.getAttribute("class");
114 });
115
116 }
117
118})(/Firefox/.test(window.navigator.userAgent));
119
120var Class = {
121//创建类
122 create : function () {
123 return function () {
124 this.initialize.apply(this, arguments);
125 };
126 }
127};
128
129var $ = function (id) {
130 return "string" == typeof id ? document.getElementById(id) : id;
131};
132
133
134var $A = function (a) {
135//转换数组
136 return a ? Array.apply(null, a) : new Array;
137};
138
139Function.prototype.bind = function () {
140//绑定事件
141 var wc = this, a = $A(arguments), o = a.shift();
142 return function () {
143 wc.apply(o, a.concat($A(arguments)));
144 };
145};
146
147Object.extend = function (a, b) {
148//追加方法
149 for (var i in b) a[i] = b[i];
150 return a;
151};
152
153Object.extend(Object, {
154
155 addEvent : function (a, b, c, d) {
156 //添加函数
157 var b = "object" != typeof b ? b : b[1]
158 if (a.attachEvent) a.attachEvent(b, c);
159 else a.addEventListener(b.replace(/^on/, ""), c, d || false);
160 return c;
161 },
162
163 delEvent : function (a, b, c, d) {
164 //删除函数
165 var b = "object" != typeof b ? b : b[1]
166 if (a.detachEvent) a.detachEvent(b, c);
167 else a.removeEventListener(b.replace(/^on/, ""), c, d || false);
168 return c;
169 }
170
171});
172
173
174var CMenu2 = Class.create();
175
176CMenu2.prototype = {
177
178 initialize : function (body, $left, $top) {
179 //初始化参数
180 var wc = this;
181 wc.body = body; //整体
182 wc.property = { left : $left, top : $top }; //记录左边和上边的距离
183 wc.images = []; //所有的图片元素
184 wc.t_images = []; //所有缓存图片组
185 (wc.text = { temp : document.createElement("div"), items : [], ing : false }).temp.className = "CMenu2Text"; //设置字组
186 wc.title = body[0].childNodes[0] //标题
187 wc.content = body[0].childNodes[1]; //图片的parentNode元素
188 wc.titleLeft = 0; //标题距离整体左边的距离
189 (wc.o_move = { temp : document.createElement("div"), left : 0, top : 0, ing : false }).temp.className = "CMenu2Temp"; //拖拽时临时对象
190 wc.i_fmove = wc.e_fmove = null; //拖拽的函数引用地址存放
191 wc.area = 50; //变化范围
192 },
193
194 offset : function (o) {
195 //设置定位
196 var $x = $y = 0;
197 do { $x += o.offsetLeft, $y += o.offsetTop; }
198 while (o = o.offsetParent);
199 return { x : $x, y : $y };
200 },
201
202 reMouse : function () {
203 //返回鼠标绝对位置
204 var e = window.event;
205 return {
206 x : document.documentElement.scrollLeft + e.clientX,
207 y : document.documentElement.scrollTop + e.clientY
208 };
209 },
210
211 load_image : function (url) {
212 //加载图片
213 return (new Image).src = url;
214 },
215
216 load : function (ary) {
217 //加载-创建图片及执行初始化参数
218 var wc = this, imgs = wc.images, width = 0, oimg, i;
219 for (i = 0 ; i < ary.length ; i ++) {
220 oimg = document.createElement("img"); //创建图片
221 oimg.src = (wc.t_images[i] = [wc.load_image(ary[i][0]), wc.load_image(ary[i][1])])[0]; //设置链接
222 oimg.align = "top", oimg.onclick = ary[i][5]; //设置对齐和点击事件
223 with (oimg.style) { width = ary[i][2] + "px", height = ary[i][3] + "px"; }; //设置高宽（加载时避免变形）
224 wc.content.appendChild(
225 (imgs[i] = { img : oimg, width : ary[i][2], height : ary[i][3] }).img //设置图片对象组，返回图片追加到内容
226 );
227 width += ary[i][2]; //设置宽度
228 wc.text.items[i] = ary[i][4]; //设置字体组
229 }
230 wc.init_body(width); //设置宽度
231 wc.set_titleStyle(); //设置标题样式
232 wc.titleLeft = wc.offset(wc.title).x - wc.offset(wc.body[0]).x; //设置标题距离整体的距离
233 wc.set_position(wc.property.left, wc.property.top); //设置位置
234 wc.content.onmousemove = wc.c_move.bind(wc); //设置动画
235 wc.content.onmouseout = wc.c_out.bind(wc); //设置还原大小
236 wc.title.onmousedown = wc.s_move.bind(wc); //设置拖拽
237
238 },
239
240 init_body : function (width) {
241 //初始化菜单位置
242 var wc = this, body = wc.body[0], background = wc.body[1], title = wc.title, content = wc.content;
243
244 body.style.display = background.style.display = "block"; //设置显示
245
246 title.style.width = content.offsetWidth + "px"; //设置标题和内容的宽度
247 body.style.width = content.offsetWidth + width + "px"; //设置整体的宽度
248 title.style.margin = "auto"; //设置标题居中
249
250 background.style.width = title.offsetWidth + "px"; //设置背景的宽度
251 background.style.height = content.offsetHeight + "px"; //设置背景的高度
252 },
253
254 set_titleStyle : function () {
255 //设置标题样式 因为从CSS设置标题的高度会导致整体宽度自适应为100%所以只好从这里设置了
256 var wc = this, title = wc.title;
257 with (title.style) {
258 height = lineHeight = "30px";
259 }
260 },
261
262 set_position : function (a_x, a_y) {
263 //设置位置
264 var wc = this;
265 with (wc.body[0].style) { left = a_x - wc.titleLeft + "px", top = a_y + "px"; } //设置整体
266 with (wc.body[1].style) { left = wc.offset(wc.title).x + "px", top = a_y + wc.title.offsetHeight + "px"; } //设置背景
267 },
268
269 c_move : function () {
270 //鼠标移动的时候变化图片大小
271 var wc = this, mos = wc.reMouse(), cnt = wc.content, imgs = wc.images, t_imgs = wc.t_images, text = wc.text,
272 obj, tobj = { o : null, i : 0 }, pos, img, num, i;
273
274 if (wc.o_move.ing) return;
275
276 for (i = 0 ; i < imgs.length ; i ++) {
277 obj = imgs[i], img = obj.img,
278 num = (1 - Math.min(Math.abs(mos.x - wc.offset(img).x - img.offsetWidth / 2), wc.area) / wc.area);
279 //用1减去鼠标到图片的距离的绝对值，在除以距离得到百分比，然后分别乘以元素的高和宽得到增加数
280 img.style.width = obj.width + Math.round(num * obj.width) + "px";
281 img.style.height = obj.height + Math.round(num * obj.height) + "px";
282 img.style.marginTop = Math.round(num * 10) + "px";
283 if (num > 0.85) { tobj.o = img, tobj.i = i; } //控制字体
284 if (num > 0.5) { //换图
285 if (img.src != t_imgs[i][1]) img.src = t_imgs[i][1];
286 } else {
287 if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0];
288 }
289 }
290
291 if (tobj.o) {
292 //设置字体
293 if (!text.ing) document.body.appendChild(text.temp);
294
295 pos = wc.offset(tobj.o), text.ing = true;
296 text.temp.innerHTML = text.items[tobj.i];
297
298 with (text.temp.style) {
299 left = pos.x + tobj.o.offsetWidth / 2 - text.temp.offsetWidth / 2 + "px";
300 top = pos.y + tobj.o.offsetHeight + 7 + "px";
301 }
302 } else if (text.ing) {
303 //删除字体
304 text.temp.parentNode.removeChild(text.temp);
305 text.ing = false;
306 }
307 },
308
309 c_out : function () {
310 //鼠标离开的时候设置恢复
311 var wc = this, e = window.event, imgs = wc.images, t_imgs = wc.t_images, i;
312
313 if (wc.content.contains(e.toElement || e.fromElement)) return;
314 for (i = 0 ; i < imgs.length ; i ++) {
315 with (imgs[i]) {
316 img.style.width = width + "px", img.style.height = height + "px", img.style.marginTop = "0px"; //恢复大小
317 if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0]; //恢复图片地址
318 }
319 }
320
321 if (wc.text.ing) {
322 //删除字体
323 wc.text.temp.parentNode.removeChild(wc.text.temp);
324 wc.text.ing = false;
325 }
326 },
327
328 s_move : function () {
329 //鼠标按下
330 var wc = this, mos = wc.reMouse(), tit = wc.title, pos = wc.offset(tit);
331 if (wc.i_fmove || wc.e_fmove) return;
332 with (wc.o_move) {
333 left = mos.x - pos.x, top = mos.y - pos.y;
334 with (temp.style) {
335 left = pos.x - 1 + "px", top = pos.y - 1 + "px";
336 width = tit.offsetWidth + "px", height = tit.offsetHeight + "px";
337 }
338 document.body.appendChild(temp);
339 ing = true;
340 }
341 wc.i_fmove = Object.addEvent(document, "onmousemove", wc.i_move.bind(wc));
342 wc.e_fmove = Object.addEvent(document, "onmouseup", wc.e_move.bind(wc));
343 },
344
345 i_move : function () {
346 //鼠标移动中
347 var wc = this, mos = wc.reMouse(), obj = wc.o_move;
348 with (obj.temp.style) {
349 left = mos.x - obj.left + "px", top = mos.y - obj.top + "px";
350 }
351
352 if (window.IE) obj.temp.setCapture(); //为了拽出浏览器
353 try {
354 //拖拽时清除selection ranges对象
355 if (document.selection) document.selection.empty();
356 else window.getSelection().removeAllRanges();
357 } catch (exp) {}
358 },
359
360 e_move : function () {
361 //鼠标松开
362 var wc = this, obj = wc.o_move.temp, pos = wc.offset(obj);
363 wc.set_position(wc.property.left = pos.x + 1, wc.property.top = pos.y + 1);
364
365 if (window.IE) obj.releaseCapture(); //为了拽出浏览器
366
367 obj.parentNode.removeChild(obj);
368 wc.o_move.ing = false;
369
370 Object.delEvent(document, "onmousemove", wc.i_fmove);
371 Object.delEvent(document, "onmouseup", wc.e_fmove);
372 wc.i_fmove = wc.e_fmove = null;
373 }
374
375};
376
377
378window.onload = function () {
379 var wc = new CMenu2([$("CMenu2"), $("CMenu2_Content")], 20, 5);
380 wc.load([
381 //默认小图路径，变化中换成相对大图路径，宽，高，终效果文字显示，点击后执行函数
382 ["CMenu2/1.gif", "CMenu2/11.gif", 21, 23, "大界面", function () { alert("1号"); }],
383 ["CMenu2/2.gif", "CMenu2/12.gif", 19, 21, "桌面日历", function () { alert("2号"); }],
384 ["CMenu2/3.gif", "CMenu2/13.gif", 19, 21, "事件列表", function () { alert("3号"); }],
385 ["CMenu2/4.gif", "CMenu2/14.gif", 21, 21, "添加事件", function () { alert("4号"); }],
386 ["CMenu2/5.gif", "CMenu2/15.gif", 23, 24, "管理", function () { alert("5号"); }],
387 ["CMenu2/6.gif", "CMenu2/16.gif", 18, 18, "退出", function () { window.opener = null; window.close(); }]
388 ]);
389};
390</script>
391</head>
392<body>
393<br />
394<!--CMenu2菜单 开始-->
395<div id="CMenu2"><div class="Title">标题</div><div class="Content"></div></div>
396<div id="CMenu2_Content"></div>
397<!--CMenu2菜单 结束-->
398<div id="status" style="color:#FFFFFF"></div>
399</body>
400</html>
401
402
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>CMenu2</title>6
<style type="text/css">
7
body {
body 8
/*设置body背景颜色*/9
background-color:#000000;10
}11
12
div#CMenu2 {13
/*外框*/14
text-align:center;15
z-index:2;16
}17
18
div#CMenu2_Content {19
/*设置内容底部的样式*/20
background-color:#ACBEC6;21
filter:alpha(opacity=50);22
opacity:0.5;23
z-index:1;24
}25
26
div#CMenu2, div#CMenu2_Content {27
/*设置整体定位*/28
position:absolute;29
display:none;30
}31
32
div#CMenu2 div.Title {33
/*设置标题的样式*/34
background-color:#3B94B6;35
color:#FFFFFF;36
font-weight:bold;37
cursor:default;38
}39
40
div#CMenu2 div.Content {41
/*设置内容对齐方式IE BUG*/42
position:relative;43
text-align:center;44
padding:5px 0px 5px 10px;45
}46
47
div#CMenu2 div.Content img {48
/*设置内容中所有图片的样式*/49
margin-right:10px;50
}51
52
div.CMenu2Temp {53
/*设置移动框的样式*/54
border:#CCCCCC 1px dashed;55
position:absolute;56
z-index:100;57
}58
div.CMenu2Text {59
/*设置终效果字的样式*/60
position:absolute;61
z-index:100;62
text-align:center;63
font-size:14px;64
font-weight:bold;65
font-family:"黑体";66
color:#6699CC;67
}68
</style>69
<script type="text/javascript">70
(function (bool) {71
//兼容FF一些方法72
var html;73
74
window.IE = /MSIE/.test(window.navigator.userAgent);75
76
if (bool) {77
78
html = window.HTMLElement.prototype;79
80
window.__defineGetter__("event", function () {81
//兼容Event对象82
var o = arguments.callee; 83
84
do {85
if (o.arguments[0] instanceof Event) return o.arguments[0]; 86
} while (o = o.caller);87
88
return null;89
});90
91
Event.prototype.__defineGetter__("fromElement", function () {92
/*93
这里：94
onmouseover的时候relatedTarget为鼠标离开（onmouseout）的对象95
onmouseout的时候relatedTarget为鼠标当前（onmouseover）的对象96
*/97
return this.relatedTarget;98
99
});100
101
html.contains = function (o) {102
do {103
if (o == this) return true;104
} while (o = o.parentNode);105
return false;106
};107
108
html.__defineSetter__("className", function (t_v) {109
this.setAttribute("class", t_v);110
});111
112
html.__defineGetter__("className", function () {113
return this.getAttribute("class");114
});115
116
}117
118
})(/Firefox/.test(window.navigator.userAgent));119
120
var Class = {121
//创建类122
create : function () {123
return function () {124
this.initialize.apply(this, arguments);125
};126
}127
};128
129
var $ = function (id) {130
return "string" == typeof id ? document.getElementById(id) : id;131
};132
133
134
var $A = function (a) {135
//转换数组136
return a ? Array.apply(null, a) : new Array;137
};138
139
Function.prototype.bind = function () {140
//绑定事件141
var wc = this, a = $A(arguments), o = a.shift();142
return function () {143
wc.apply(o, a.concat($A(arguments)));144
};145
};146
147
Object.extend = function (a, b) {148
//追加方法149
for (var i in b) a[i] = b[i];150
return a;151
};152
153
Object.extend(Object, {154
155
addEvent : function (a, b, c, d) {156
//添加函数157
var b = "object" != typeof b ? b : b[1]158
if (a.attachEvent) a.attachEvent(b, c);159
else a.addEventListener(b.replace(/^on/, ""), c, d || false);160
return c;161
},162
163
delEvent : function (a, b, c, d) {164
//删除函数165
var b = "object" != typeof b ? b : b[1]166
if (a.detachEvent) a.detachEvent(b, c);167
else a.removeEventListener(b.replace(/^on/, ""), c, d || false);168
return c;169
}170
171
});172
173
174
var CMenu2 = Class.create();175
176
CMenu2.prototype = {177
178
initialize : function (body, $left, $top) {179
//初始化参数180
var wc = this;181
wc.body = body; //整体182
wc.property = { left : $left, top : $top }; //记录左边和上边的距离183
wc.images = []; //所有的图片元素184
wc.t_images = []; //所有缓存图片组185
(wc.text = { temp : document.createElement("div"), items : [], ing : false }).temp.className = "CMenu2Text"; //设置字组186
wc.title = body[0].childNodes[0] //标题187
wc.content = body[0].childNodes[1]; //图片的parentNode元素188
wc.titleLeft = 0; //标题距离整体左边的距离189
(wc.o_move = { temp : document.createElement("div"), left : 0, top : 0, ing : false }).temp.className = "CMenu2Temp"; //拖拽时临时对象190
wc.i_fmove = wc.e_fmove = null; //拖拽的函数引用地址存放191
wc.area = 50; //变化范围192
},193
194
offset : function (o) {195
//设置定位196
var $x = $y = 0;197
do { $x += o.offsetLeft, $y += o.offsetTop; }198
while (o = o.offsetParent);199
return { x : $x, y : $y };200
},201
202
reMouse : function () {203
//返回鼠标绝对位置204
var e = window.event;205
return {206
x : document.documentElement.scrollLeft + e.clientX,207
y : document.documentElement.scrollTop + e.clientY208
};209
},210
211
load_image : function (url) {212
//加载图片213
return (new Image).src = url;214
},215
216
load : function (ary) {217
//加载-创建图片及执行初始化参数218
var wc = this, imgs = wc.images, width = 0, oimg, i;219
for (i = 0 ; i < ary.length ; i ++) {220
oimg = document.createElement("img"); //创建图片221
oimg.src = (wc.t_images[i] = [wc.load_image(ary[i][0]), wc.load_image(ary[i][1])])[0]; //设置链接222
oimg.align = "top", oimg.onclick = ary[i][5]; //设置对齐和点击事件223
with (oimg.style) { width = ary[i][2] + "px", height = ary[i][3] + "px"; }; //设置高宽（加载时避免变形）224
wc.content.appendChild(225
(imgs[i] = { img : oimg, width : ary[i][2], height : ary[i][3] }).img //设置图片对象组，返回图片追加到内容226
);227
width += ary[i][2]; //设置宽度228
wc.text.items[i] = ary[i][4]; //设置字体组229
}230
wc.init_body(width); //设置宽度231
wc.set_titleStyle(); //设置标题样式232
wc.titleLeft = wc.offset(wc.title).x - wc.offset(wc.body[0]).x; //设置标题距离整体的距离233
wc.set_position(wc.property.left, wc.property.top); //设置位置234
wc.content.onmousemove = wc.c_move.bind(wc); //设置动画235
wc.content.onmouseout = wc.c_out.bind(wc); //设置还原大小236
wc.title.onmousedown = wc.s_move.bind(wc); //设置拖拽237
238
},239
240
init_body : function (width) {241
//初始化菜单位置242
var wc = this, body = wc.body[0], background = wc.body[1], title = wc.title, content = wc.content;243
244
body.style.display = background.style.display = "block"; //设置显示245
246
title.style.width = content.offsetWidth + "px"; //设置标题和内容的宽度247
body.style.width = content.offsetWidth + width + "px"; //设置整体的宽度248
title.style.margin = "auto"; //设置标题居中249
250
background.style.width = title.offsetWidth + "px"; //设置背景的宽度251
background.style.height = content.offsetHeight + "px"; //设置背景的高度252
},253
254
set_titleStyle : function () {255
//设置标题样式 因为从CSS设置标题的高度会导致整体宽度自适应为100%所以只好从这里设置了256
var wc = this, title = wc.title;257
with (title.style) {258
height = lineHeight = "30px";259
}260
},261
262
set_position : function (a_x, a_y) {263
//设置位置264
var wc = this;265
with (wc.body[0].style) { left = a_x - wc.titleLeft + "px", top = a_y + "px"; } //设置整体266
with (wc.body[1].style) { left = wc.offset(wc.title).x + "px", top = a_y + wc.title.offsetHeight + "px"; } //设置背景267
},268
269
c_move : function () {270
//鼠标移动的时候变化图片大小271
var wc = this, mos = wc.reMouse(), cnt = wc.content, imgs = wc.images, t_imgs = wc.t_images, text = wc.text,272
obj, tobj = { o : null, i : 0 }, pos, img, num, i;273
274
if (wc.o_move.ing) return;275
276
for (i = 0 ; i < imgs.length ; i ++) {277
obj = imgs[i], img = obj.img,278
num = (1 - Math.min(Math.abs(mos.x - wc.offset(img).x - img.offsetWidth / 2), wc.area) / wc.area);279
//用1减去鼠标到图片的距离的绝对值，在除以距离得到百分比，然后分别乘以元素的高和宽得到增加数280
img.style.width = obj.width + Math.round(num * obj.width) + "px";281
img.style.height = obj.height + Math.round(num * obj.height) + "px";282
img.style.marginTop = Math.round(num * 10) + "px";283
if (num > 0.85) { tobj.o = img, tobj.i = i; } //控制字体284
if (num > 0.5) { //换图285
if (img.src != t_imgs[i][1]) img.src = t_imgs[i][1];286
} else {287
if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0];288
}289
}290
291
if (tobj.o) {292
//设置字体293
if (!text.ing) document.body.appendChild(text.temp);294
295
pos = wc.offset(tobj.o), text.ing = true;296
text.temp.innerHTML = text.items[tobj.i];297
298
with (text.temp.style) {299
left = pos.x + tobj.o.offsetWidth / 2 - text.temp.offsetWidth / 2 + "px";300
top = pos.y + tobj.o.offsetHeight + 7 + "px";301
}302
} else if (text.ing) {303
//删除字体304
text.temp.parentNode.removeChild(text.temp);305
text.ing = false;306
}307
},308
309
c_out : function () {310
//鼠标离开的时候设置恢复311
var wc = this, e = window.event, imgs = wc.images, t_imgs = wc.t_images, i;312
313
if (wc.content.contains(e.toElement || e.fromElement)) return;314
for (i = 0 ; i < imgs.length ; i ++) {315
with (imgs[i]) {316
img.style.width = width + "px", img.style.height = height + "px", img.style.marginTop = "0px"; //恢复大小317
if (img.src != t_imgs[i][0]) img.src = t_imgs[i][0]; //恢复图片地址318
}319
}320
321
if (wc.text.ing) {322
//删除字体323
wc.text.temp.parentNode.removeChild(wc.text.temp);324
wc.text.ing = false;325
}326
},327
328
s_move : function () {329
//鼠标按下330
var wc = this, mos = wc.reMouse(), tit = wc.title, pos = wc.offset(tit);331
if (wc.i_fmove || wc.e_fmove) return;332
with (wc.o_move) {333
left = mos.x - pos.x, top = mos.y - pos.y;334
with (temp.style) {335
left = pos.x - 1 + "px", top = pos.y - 1 + "px";336
width = tit.offsetWidth + "px", height = tit.offsetHeight + "px";337
}338
document.body.appendChild(temp);339
ing = true;340
}341
wc.i_fmove = Object.addEvent(document, "onmousemove", wc.i_move.bind(wc));342
wc.e_fmove = Object.addEvent(document, "onmouseup", wc.e_move.bind(wc));343
},344
345
i_move : function () {346
//鼠标移动中347
var wc = this, mos = wc.reMouse(), obj = wc.o_move;348
with (obj.temp.style) {349
left = mos.x - obj.left + "px", top = mos.y - obj.top + "px";350
}351
352
if (window.IE) obj.temp.setCapture(); //为了拽出浏览器353
try {354
//拖拽时清除selection ranges对象355
if (document.selection) document.selection.empty();356
else window.getSelection().removeAllRanges();357
} catch (exp) {}358
},359
360
e_move : function () {361
//鼠标松开362
var wc = this, obj = wc.o_move.temp, pos = wc.offset(obj);363
wc.set_position(wc.property.left = pos.x + 1, wc.property.top = pos.y + 1);364
365
if (window.IE) obj.releaseCapture(); //为了拽出浏览器366
367
obj.parentNode.removeChild(obj);368
wc.o_move.ing = false;369
370
Object.delEvent(document, "onmousemove", wc.i_fmove);371
Object.delEvent(document, "onmouseup", wc.e_fmove);372
wc.i_fmove = wc.e_fmove = null;373
}374
375
};376
377
378
window.onload = function () {379
var wc = new CMenu2([$("CMenu2"), $("CMenu2_Content")], 20, 5);380
wc.load([381
//默认小图路径，变化中换成相对大图路径，宽，高，终效果文字显示，点击后执行函数382
["CMenu2/1.gif", "CMenu2/11.gif", 21, 23, "大界面", function () { alert("1号"); }],383
["CMenu2/2.gif", "CMenu2/12.gif", 19, 21, "桌面日历", function () { alert("2号"); }],384
["CMenu2/3.gif", "CMenu2/13.gif", 19, 21, "事件列表", function () { alert("3号"); }],385
["CMenu2/4.gif", "CMenu2/14.gif", 21, 21, "添加事件", function () { alert("4号"); }],386
["CMenu2/5.gif", "CMenu2/15.gif", 23, 24, "管理", function () { alert("5号"); }],387
["CMenu2/6.gif", "CMenu2/16.gif", 18, 18, "退出", function () { window.opener = null; window.close(); }]388
]);389
};390
</script>391
</head>392
<body>393
<br />394
<!--CMenu2菜单 开始-->395
<div id="CMenu2"><div class="Title">标题</div><div class="Content"></div></div>396
<div id="CMenu2_Content"></div>397
<!--CMenu2菜单 结束-->398
<div id="status" style="color:#FFFFFF"></div>399
</body>400
</html>401
402
浙公网安备 33010602011771号