码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2015-05-04 01:05:27      阅读：212      评论：0      收藏：0      [点我收藏+]

标签：

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

 

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

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4475043.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！