模拟腾讯日历菜单特效。

收集一个很不错的菜单，兼容浏览器. link link /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" >
  7body {}{
  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

转载于:https://www.cnblogs.com/xxcainiao/archive/2007/09/07/885649.html