CMenu2-模拟腾讯日历菜单特效

最新推荐文章于 2017-12-22 09:25:43 发布
最新推荐文章于 2017-12-22 09:25:43 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： 日历 腾讯 function image null class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muxrwc/article/details/1754006
版权

<!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>

muxrwc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
自绘/重绘MFC右键菜单CMenu
07-14
自绘/重绘MFC右键菜单CMenu
C++ MFC中的CMenu---动态添加菜单/菜单项
发展是曲折的但也是前进的
10-23 9068
如何动态添加菜单/菜单项、子菜单、右键菜单 有关菜单的操作主要用到CMenu类，当然也可用相应API函数，CMenu类只是MFC对API中操作菜单的函数的封装而已。 不过能用类就尽量用类，类的组织方式好呗，代码看着也舒服。 若是SDK编程，那就用API吧 。      CMenu menuMain,menu1; //首先 定义CMenu对象 一、 创建菜单，有两种方法 1. 用LoadMe
MFC中的CMenu---如何动态添加菜单/菜单项、子菜单、右键菜单
thanklife的专栏
12-22 1661
如何动态添加菜单/菜单项、子菜单、右键菜单 有关菜单的操作主要用到CMenu类，当然也可用相应API函数，CMenu类只是MFC对API中操作菜单的函数的封装而已。 不过能用类就尽量用类，类的组织方式好呗，代码看着也舒服。 若是SDK编程，那就用API吧 。      CMenu menuMain,menu1; //首先 定义CMenu对象 一、 创建菜单，有两种方法 1.
MFC-CMenu(菜单)
_ACME_的博客
03-26 1111
创建窗口菜单:添加资源->菜单资源,如图所示: 现在创建了两个子菜单(文件和编辑菜单)然后点击主窗口右键单击属性,如图所示: 然后右键单击新建->添加事件处理程序,如图所示:写测试代码:void CMFCTESTDlg::OnNew() { // TODO: 在此添加命令处理程序代码 AfxMessageBox(_T("文件->NEW")); } 如图所示:创建快捷菜单:
MFC中的CMenu---如何动态添加菜单/菜单项、子菜单、右键菜单 .
成长之路
07-22 959
如何动态添加菜单/菜单项、子菜单、右键菜单 有关菜单的操作主要用到CMenu类，当然也可用相应API函数，CMenu类只是MFC对API中操作菜单的函数的封装而已。 不过能用类就尽量用类，类的组织方式好呗，代码看着也舒服。 若是SDK编程，那就用API吧 。      CMenu menuMain,menu1; //首先 定义CMenu对象 一、 创建菜单，有两种方法 1. 用LoadMe
自绘菜单类BCMenu.rar_CMenu_Vc_bcmenu_自绘菜单_自绘菜单类
09-21
本程序是在VC下开发的Windodws窗口界面程序，教你如何根据自己的喜好，定制出自己满意的菜单。
CMenu菜单栏自绘实例
09-01
VC开发，CMenu派生类实现菜单栏自绘，可设置菜单项宽度，可修改菜单项文字颜色及背景色，可正常运行看效果
vc CMenu 自绘菜单Demo源代码.rar
07-10
VC .NET 自绘菜单Demo 子类化CMenu 自定义菜单背景色，字体颜色，图标尺寸等，适合初学者学习。
MFC右键菜单及文件窗口测试.zip
05-05
CFileDialog、Cmenu测试小Demo 1.列举CMenu的简单用法 2.CFileDialog获取选取文件的路径的小例子
JavaScript实现AStar算法
和谐的望天
04-02 4905
A-Star/*蛮好玩的东西。。。严重感谢winter。。。*/var AStar = function () {    this.tmin = -1;   //上部搜索最小值(不包括)    this.rmax = -1;   //右部搜索最大值(不包括)    this.bmax = -1;   //下部搜索最大值(不包括)    this.lmin = -1;   //左部搜索最小值(不
relatedTarget方法的介绍
和谐的望天
07-31 4845
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">relatedTarget对象介绍!function (bool) {//兼容FF一些方法    var html;        if (bool) {            html = window.HTMLElem
把字符换成&#编码。。。
和谐的望天
12-03 4268
var toHTML = {    on : function (str) {        var a = [], i = 0;                for (; i                 return "&#" + a.join(";&#") + ";";    },        un : function (str) {        return str.re
原型父链__proto__对象的介绍。。。
和谐的望天
12-29 4080
/*proto对象只不过是prototype的一个成员，它默认指向对象的父原型链如果修改了它就会修改当前对象的父链。。实例后，它的默认值是指向原型对象的。。。就好比var c = new Function;c.prototype = new (new Function);这样就给c.prototype的父链指向了(new Function).prototype（prototype是一个对象，所
翻页特效。。。
和谐的望天
09-20 3823
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Bookhtml, body {    margin:0px;}body {    text-align:center;}#book {/*设置书本*/    width:700px;    margin:auto;}
兼容IE，FF，OP的添加收藏夹（兼容热点）
和谐的望天
12-03 3273
var address = function (obj, url, title) {/*嘿嘿，从BlueDestiny的BLOG里搜刮了一篇添加收藏夹的代码，不过那个貌似偶合太高。。看的迷糊。。所以单独做出来了。。。并且可以兼容热点使用。。。BlueDestiny前辈的源文：http://www.never-online.net/blog/article.asp?id=108*/    var e
获取网页内所有图片地址
和谐的望天
09-12 2685
打开页面，当页面全部载入完毕后，从地址栏 运行，以下code中的javascript:.........那个即可。。 window.onload = function () {    (function (is) {        var i, r = /"([^"]+)"/, o = {}, a = [];        for (i = 0; i             if (is[
FF下实现currentStyle方法
和谐的望天
11-19 2467
(function (bool) {//严重感谢M2前辈    if (bool) {        HTMLElement.prototype.__defineGetter__("currentStyle", function () {        //getComputedStyle方法参数一是目标对象，参数二是具体属性。。。把注释对换下就知道了。。            //return
不想CMenu折叠子菜单
最新发布
06-02
如果你不想让 CMenu 自动折叠子菜单，可以通过以下方法来实现： 1. 将 CMenu 的样式设置为 MNS_MODELESS，这样就可以防止 CMenu 自动折叠子菜单。具体实现方式是在创建 CMenu 对象时，将菜单的样式设置为 MNS_MODELESS，示例代码如下： ``` CMenu menu; menu.CreateMenu(); menu.SetMenuStyle(MNS_MODELESS); ``` 2. 将所有的子菜单都添加到一个“更多”菜单项的下面，这样可以避免子菜单数量过多导致 CMenu 自动折叠子菜单。具体实现方式是在创建 CMenu 对象时，先创建一个“更多”菜单项，然后将所有的子菜单都添加到“更多”菜单项的下面，示例代码如下： ``` CMenu menu; menu.CreateMenu(); menu.AppendMenu(MF_STRING, ID_MORE, _T("More")); menu.AppendMenu(MF_POPUP, (UINT_PTR)submenu1->m_hMenu, _T("Submenu1")); menu.AppendMenu(MF_POPUP, (UINT_PTR)submenu2->m_hMenu, _T("Submenu2")); // 将所有的子菜单添加到“更多”菜单项的下面 CMenu* moreMenu = menu.GetSubMenu(0); moreMenu->AppendMenu(MF_POPUP, (UINT_PTR)submenu3->m_hMenu, _T("Submenu3")); moreMenu->AppendMenu(MF_POPUP, (UINT_PTR)submenu4->m_hMenu, _T("Submenu4")); ``` 以上两种方法可以避免 CMenu 自动折叠子菜单，根据实际需求选择适合的方法即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值