完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

<!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=utf-8" />
<title>完美拖拽</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,h2,p{margin:0;padding:0;}
body{color:#fff;background:#000;font:12px/2 Arial;}
p{padding:0 10px;margin-top:10px;}
span{color:#ff0;padding-left:5px;}
#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
window.onload=function ()
{
    var oBox=document.getElementById("box");
    var oH2 = oBox.getElementsByTagName("h2")[0];
    var oA = oBox.getElementsByTagName("a")[0];
    var aSpan = oBox.getElementsByTagName("span");    
    var disX = disY = 0;
    var bDrag = false;
    var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}]
    
    //鼠标按下, 激活拖拽
    oH2.onmousedown = function (event)
    {        
        var event = event || window.event;
        bDrag = true;
        disX = event.clientX - oBox.offsetLeft;
        disY = event.clientY - oBox.offsetTop;
        
        aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})
        
        this.setCapture && this.setCapture();
        
        return false
    };
    
    //拖拽开始
    document.onmousemove = function (event)
    {
        if (!bDrag) return;
        var event = event || window.event;
        var iL = event.clientX - disX;
        var iT = event.clientY - disY;
        var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
        var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
        
        iL = iL < 0 ? 0 : iL;
        iL = iL > maxL ? maxL : iL; 
        
        iT = iT < 0 ? 0 : iT;
        iT = iT > maxT ? maxT : iT;
        
        oBox.style.marginTop = oBox.style.marginLeft = 0;
        oBox.style.left = iL + "px";
        oBox.style.top = iT + "px";        

        aPos.push({x:iL, y:iT})
        
        status();
        
        return false
    };

    //鼠标释放, 结束拖拽
    document.onmouseup = window.onblur = oH2.onlosecapture = function ()
    {
        bDrag = false;                
        oH2.releaseCapture && oH2.releaseCapture();
        status()
    };
    
    //回放拖动轨迹
    oA.onclick = function ()
    {
        if (aPos.length == 1) return;
        var timer = setInterval(function ()
        {
            var oPos = aPos.pop();
            oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
        }, 30);
        
        this.focus = false;//去除链接虚线
        
        return false
    };
    
    //阻止冒泡
    oA.onmousedown = function (event)
    {
        (event || window.event).cancelBubble = true
    };
    
    //监听状态函数
    function status ()
    {
        aSpan[0].innerHTML = bDrag;
        aSpan[1].innerHTML = oBox.offsetTop;
        aSpan[2].innerHTML = oBox.offsetLeft
    }
    
    //初始调用
    status()
};
</script>
</head>
<body>
<div id="box">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span></span></p>
    <p><strong>offsetTop:</strong><span></span></p>
    <p><strong>offsetLeft:</strong><span></span></p>
</div>
</body>
</html>
仿腾讯微博效果
<!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=utf-8" />
<title>仿腾讯微博效果</title>
<style type="text/css">
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
#msgBox form{background:url(img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .times a{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
</style>
<script type="text/javascript">
/*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
var get = {
    byId: function(id) {
        return typeof id === "string" ? document.getElementById(id) : id
    },
    byClass: function(sClass, oParent) {
        var aClass = [];
        var reClass = new RegExp("(^| )" + sClass + "( |$)");
        var aElem = this.byTagName("*", oParent);
        for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        return aClass
    },
    byTagName: function(elem, obj) {
        return (obj || document).getElementsByTagName(elem)
    }
};
/*-------------------------- +
  事件绑定, 删除
 +-------------------------- */
var EventUtil = {
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
    },
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
    },
    addLoadHandler: function (fnHandler) {
        this.addHandler(window, "load", fnHandler)
    }
};
/*-------------------------- +
  设置css样式
  读取css样式
 +-------------------------- */
function css(obj, attr, value)
{
    switch (arguments.length)
    {
        case 2:
            if(typeof arguments[1] == "object")
            {    
                for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
            }
            else
            {    
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
            }
            break;
        case 3:
            attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
            break;
    }
};

EventUtil.addLoadHandler(function ()
{
    var oMsgBox = get.byId("msgBox");
    var oUserName = get.byId("userName");
    var oConBox = get.byId("conBox");
    var oSendBtn = get.byId("sendBtn");
    var oMaxNum = get.byClass("maxNum")[0];
    var oCountTxt = get.byClass("countTxt")[0];
    var oList = get.byClass("list")[0];
    var oUl = get.byTagName("ul", oList)[0];
    var aLi = get.byTagName("li", oList);
    var aFtxt = get.byClass("f-text", oMsgBox);
    var aImg = get.byTagName("img", get.byId("face"));
    var bSend = false;
    var timer = null;
    var oTmp = "";
    var i = 0;
    var maxNum = 140;
    
    //禁止表单提交
    EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {return false});
    
    //为广播按钮绑定发送事件
    EventUtil.addHandler(oSendBtn, "click", fnSend);
    
    //为Ctrl+Enter快捷键绑定发送事件
    EventUtil.addHandler(document, "keyup", function(event)
    {
        var event = event || window.event;
        event.ctrlKey && event.keyCode == 13 && fnSend()
    });
    
    //发送广播函数
    function fnSend ()
    {
        var reg = /^\s*$/g;
        if(reg.test(oUserName.value))
        {
            alert("\u8bf7\u586b\u5199\u60a8\u7684\u59d3\u540d");
            oUserName.focus()
        }
        else if(!/^[u4e00-\u9fa5\w]{2,8}$/g.test(oUserName.value))
        {
            alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");
            oUserName.focus()
        }
        else if(reg.test(oConBox.value))
        {
            alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
            oConBox.focus()
        }
        else if(!bSend)
        {
            alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
            oConBox.focus()
        }
        else
        {
            var oLi = document.createElement("li");
            var oDate = new Date();
            oLi.innerHTML = "<div class=\"userPic\"><img src=\"" + get.byClass("current", get.byId("face"))[0].src + "\"></div>\
                             <div class=\"content\">\
                                 <div class=\"userName\"><a href=\"javascript:;\">" + oUserName.value + "</a>:</div>\
                                <div class=\"msgInfo\">" + oConBox.value.replace(/<[^>]*>|&nbsp;/ig, "") + "</div>\
                                <div class=\"times\"><span>" + format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) + "\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "</span><a class=\"del\" href=\"javascript:;\">\u5220\u9664</a></div>\
                             </div>";
            //插入元素
            aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);
            
            //重置表单
            get.byTagName("form", oMsgBox)[0].reset();
            for (i = 0; i < aImg.length; i++) aImg[i].className = "";
            aImg[0].className = "current";
            
            //将元素高度保存
            var iHeight = oLi.clientHeight - parseFloat(css(oLi, "paddingTop")) - parseFloat(css(oLi, "paddingBottom"));
            var alpah = count = 0;
            css(oLi, {"opacity" : "0", "height" : "0"});    
            timer = setInterval(function ()
            {
                css(oLi, {"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
                if (count > iHeight)
                {
                    clearInterval(timer);
                    css(oLi, "height", iHeight + "px");
                    timer = setInterval(function ()
                    {
                        css(oLi, "opacity", (alpah += 10));
                        alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))
                    },30)
                }
            },30);
            //调用鼠标划过/离开样式
            liHover();
            //调用删除函数
            delLi()
        }
    };
    
    //事件绑定, 判断字符输入
    EventUtil.addHandler(oConBox, "keyup", confine);    
    EventUtil.addHandler(oConBox, "focus", confine);
    EventUtil.addHandler(oConBox, "change", confine);
    
    //输入字符限制
    function confine ()
    {
        var iLen = 0;        
        for (i = 0; i < oConBox.value.length; i++) iLen += /[^\x00-\xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;
        oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));    
        maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "\u8fd8\u80fd\u8f93\u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "\u5df2\u8d85\u51fa", bSend = false)
    }
    //加载即调用
    confine();        
    
    //广播按钮鼠标划过样式
    EventUtil.addHandler(oSendBtn, "mouseover", function () {this.className = "hover"});

    //广播按钮鼠标离开样式
    EventUtil.addHandler(oSendBtn, "mouseout", function () {this.className = ""});
    
    //li鼠标划过/离开处理函数
    function liHover()
    {
        for (i = 0; i < aLi.length; i++)
        {
            //li鼠标划过样式
            EventUtil.addHandler(aLi[i], "mouseover", function (event)
            {
                this.className = "hover";
                oTmp = get.byClass("times", this)[0];
                var aA = get.byTagName("a", oTmp);
                if (!aA.length)
                {
                    var oA = document.createElement("a");                    
                    oA.innerHTML = "删除";
                    oA.className = "del";
                    oA.href = "javascript:;";
                    oTmp.appendChild(oA)
                }
                else
                {
                    aA[0].style.display = "block";
                }
            });

            //li鼠标离开样式
            EventUtil.addHandler(aLi[i], "mouseout", function ()
            {
                this.className = "";
                var oA = get.byTagName("a", get.byClass("times", this)[0])[0];
                oA.style.display = "none"    
            })
        }
    }
    liHover();
    
    //删除功能
    function delLi()
    {
        var aA = get.byClass("del", oUl);
        
        for (i = 0; i < aA.length; i++)
        {
            aA[i].onclick = function ()
            {
                var oParent = this.parentNode.parentNode.parentNode;
                var alpha = 100;
                var iHeight = oParent.offsetHeight;
                timer = setInterval(function ()
                {
                    css(oParent, "opacity", (alpha -= 10));
                    if (alpha < 0)
                    {
                        clearInterval(timer);                        
                        timer = setInterval(function ()
                        {
                            iHeight -= 10;
                            iHeight < 0 && (iHeight = 0);
                            css(oParent, "height", iHeight + "px");
                            iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))
                        },30)
                    }    
                },30);            
                this.onclick = null    
            }            
        }
    }
    delLi();
    
    //输入框获取焦点时样式
    for (i = 0; i < aFtxt.length; i++)
    {
        EventUtil.addHandler(aFtxt[i], "focus", function ()    {this.className = "active"});        
        EventUtil.addHandler(aFtxt[i], "blur", function () {this.className = ""})
    }
    
    //格式化时间, 如果为一位数时补0
    function format(str)
    {
        return str.toString().replace(/^(\d)$/,"0$1")
    }
    
    //头像
    for (i = 0; i < aImg.length; i++)
    {
        aImg[i].onmouseover = function ()
        {
            this.className += " hover"
        };
        aImg[i].onmouseout = function ()
        {
            this.className = this.className.replace(/\s?hover/,"")
        };
        aImg[i].onclick = function ()
        {
            for (i = 0; i < aImg.length; i++) aImg[i].className = "";
            this.className = "current"    
        }
    }
});
</script>
</head>
<body>
<div id="msgBox">
    <form>
        <h2>来 , 说说你在做什么 , 想什么</h2>
        <div>
            <input id="userName" class="f-text" value="" />
            <p id="face"><img src="img/face1.gif" class="current" /><img src="img/face2.gif" /><img src="img/face3.gif" /><img src="img/face4.gif" /><img src="img/face5.gif" /><img src="img/face6.gif" /><img src="img/face7.gif" /><img src="img/face8.gif" /></p>
        </div>
        <div><textarea id="conBox" class="f-text"></textarea></div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增删除广播功能。</div>
                    <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
                    <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增选择头像功能。</div>
                    <div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">增加了记录广播时间的功能。</div>
                    <div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">增加了输入字符检测功能,英文/半角为半个字符,汉字/全角为一个字符。</div>
                    <div class="times"><span>07月04日 08:30</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li>
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">仿腾讯微博效果,欢迎大家测试!</div>
                    <div class="times"><span>07月03日 20:19</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
        </ul>
    </div>    
</div>
</body>
</html>
自定义多级右键菜单
<!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=utf-8" />
<title>自定义多级右键菜单</title>
<style type="text/css">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(img/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}
#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(img/arrow.png);}
#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}
#rightMenu ul ul{display:none;position:absolute;}
</style>
<script type="text/javascript">
var getOffset = {
    top: function (obj) {
        return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
    },
    left: function (obj) {
        return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
    }    
};
window.onload = function ()
{
    var oMenu = document.getElementById("rightMenu");
    var aUl = oMenu.getElementsByTagName("ul");
    var aLi = oMenu.getElementsByTagName("li");
    var showTimer = hideTimer = null;
    var i = 0;
    var maxWidth = maxHeight = 0;
    var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
    
    oMenu.style.display = "none";
    
    for (i = 0; i < aLi.length; i++)
    {
        //为含有子菜单的li加上箭头
        aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
        
        //鼠标移入
        aLi[i].onmouseover = function ()
        {
            var oThis = this;
            var oUl = oThis.getElementsByTagName("ul");
            
            //鼠标移入样式
            oThis.className += " active";            
            
            //显示子菜单
            if (oUl[0])
            {
                clearTimeout(hideTimer);                
                showTimer = setTimeout(function ()
                {
                    for (i = 0; i < oThis.parentNode.children.length; i++)
                    {
                        oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
                        (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
                    }
                    oUl[0].style.display = "block";
                    oUl[0].style.top = oThis.offsetTop + "px";
                    oUl[0].style.left = oThis.offsetWidth + "px";
                    setWidth(oUl[0]);
                    
                    //最大显示范围                    
                    maxWidth = aDoc[0] - oUl[0].offsetWidth;
                    maxHeight = aDoc[1] - oUl[0].offsetHeight;
                    
                    //防止溢出
                    maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
                    maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
                },300);
            }            
        };
            
        //鼠标移出    
        aLi[i].onmouseout = function ()
        {
            var oThis = this;
            var oUl = oThis.getElementsByTagName("ul");
            //鼠标移出样式
            oThis.className = oThis.className.replace(/\s?active/,"");
            
            clearTimeout(showTimer);
            hideTimer = setTimeout(function ()
            {
                for (i = 0; i < oThis.parentNode.children.length; i++)
                {
                    oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
                    (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
                }
            },300);
        };
    }    
    
    
    //自定义右键菜单
    document.oncontextmenu = function (event)
    {
        var event = event || window.event;
        oMenu.style.display = "block";
        oMenu.style.top = event.clientY + "px";
        oMenu.style.left = event.clientX + "px";
        setWidth(aUl[0]);
        
        //最大显示范围
        maxWidth = aDoc[0] - oMenu.offsetWidth;
        maxHeight = aDoc[1] - oMenu.offsetHeight;
        
        //防止菜单溢出
        oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
        oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
        return false;
    };
    
    //点击隐藏菜单
    document.onclick = function ()
    {
        oMenu.style.display = "none"    
    };
    
    //取li中最大的宽度, 并赋给同级所有li    
    function setWidth(obj)
    {
        maxWidth = 0;
        for (i = 0; i < obj.children.length; i++)
        {
            var oLi = obj.children[i];            
            var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
            if (iWidth > maxWidth) maxWidth = iWidth;
        }
        for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";
    }
};
</script>
</head>
<body>
<center>自定义右键菜单,请在页面点击右键查看效果。</center>
<div id="rightMenu">
    <ul>
        <li><strong>JavaScript 学习</strong></li>
        <li>
            第一课
            <ul>
                <li>网页特效原理分析</li>
                <li>响应用户操作</li>
                <li>提示框效果</li>
                <li>事件驱动</li>
                <li>元素属性操作</li>
            </ul>
        </li>
        <li>
            第二课
            <ul>
                <li>改变网页背景颜色</li>
                <li>函数传参</li>
                <li>高重用性函数的编写</li>
                <li>126邮箱全选效果</li>
                <li>循环及遍历操作</li>
            </ul>
        </li>
        <li>
            第三课
            <ul>
                <li>
                    JavaScript组成
                    <ul>
                        <li>ECMAScript</li>
                        <li>DOM</li>
                        <li>BOM</li>
                        <li>JavaScript兼容性来源</li>
                    </ul>
                </li>
                <li>JavaScript出现的位置、优缺点</li>
                <li>变量、类型、typeof、数据类型转换、变量作用域</li>
                <li>
                    闭包
                    <ul>
                        <li>什么是闭包</li>
                        <li>简单应用</li>
                        <li>闭包缺点</li>
                    </ul>
                </li>
                <li>运算符</li>
                <li>程序流程控制</li>
                <li>
                    定时器的使用
                    <ul>
                        <li>setInterval</li>
                        <li>setTimeout</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

 

posted @ 2015-05-03 23:27  mayufo  阅读(194)  评论(0编辑  收藏  举报