admin 管理员组

文章数量: 1184232

 
<!--js部分-->
	<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(document).bind("contextmenu", function (e) { return false; });//屏蔽正常的右键菜单
            $('.main_top').bind('mousedown', ShowMouse);//给class为main_top的容器控件赋予右键菜单方法
            $('.MouserNemu').hover(function () {
                //菜单出来后移上去点左健不会隐藏当前菜单
                $(document).unbind('mousedown');
            }, function () {
                //移出后点击其它区域则隐藏菜单
                $(document).bind('mousedown', ShowMouse);
            })
        });
        function ShowMouse(e) {
            //(e.which); // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
            switch (e.which) {
                case 1:
                    //鼠标左键隐藏菜单
                    $('.MouserNemu').hide();
                    break;
                case 2: break;
                case 3:
//显示菜单
                    $('.MouserNemu').show().css({ 'left': e.pageX, 'top': e.pageY });
                    break;
            }
            return false;
        }
    	</script>



<!--CSS部分-->
<style>
        .Menu {  
    width: 100px;  
    border: solid 1px #CCC;  
    background: #EEE;  
    padding: 0px;  
    margin: 0px;  
}  
.Menu LI {  
    list-style: none;  
    padding: 0px;  
    margin: 0px;  
}  
.Menu li A {  
    color: #333;  
    text-decoration: none;  
    line-height: 20px;  
    height: 20px;  
    background-position: 6px center;  
    background-repeat: no-repeat;  
    outline: none;  
    padding: 1px 5px;  
    padding-left: 15px;  
    cursor:pointer;  
}  
   
.Menu LI.separator {  
    border-top: solid 1px #CCC;  
}  
.Menu LI.edit A { background-image: url(images/page_white_edit.png); }  
.Menu LI.cut A { background-image: url(images/cut.png); }  
.Menu LI.copy A { background-image: url(images/page_white_copy.png); }  
.Menu LI.paste A { background-image: url(images/page_white_paste.png); }  
.Menu LI.delete A { background-image: url(images/page_white_delete.png); }  
.Menu LI.quit A { background-image: url(images/door.png); } 
.MouserNemu{display:none; position:absolute; border:1px solid #CCC; background:#ddd}
</style>




<%-- 页面部分--%>
<div class="MouserNemu">
    <ul id="contextMenu" class="Menu">  
    <li class="edit">  
        <a href="#edit">Edit</a>  
    </li>  
    <li class="cut">  
        <a href="#cut">Cut</a>  
    </li>  
    <li class="copy">  
        <a href="#copy">Copy</a>  
    </li>  
    <li class="paste">  
        <a href="#paste">Paste</a>  
    </li>  
    <li class="delete">  
        <a href="#delete">Delete</a>  
    </li>  
    <li class="quit">  
        <a href="#quit">Quit</a>  
    </li>  
    </ul>
</div>


本文标签： 系统 联手 部分

版权声明：本文标题：HTML与CSS联手：实现右键菜单的奇妙弹出效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1773523167a3562908.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。