首页 > 代码库 > 第十二节（项目实战2-桌面）
第十二节（项目实战2-桌面）
注：图片跟jquery-1.11.1.min.js可网上下载。<style type="text/css"> *{margin:0;padding:0;} body{background:url("images/bg.jpg");font-size:12px;font-family:"微软雅黑";color:#666;} /*menu start*/ .menu{width:200px;background:#fff;box-shadow:1px 1px 40px #ccc;display:none;position:absolute;} .menu ul li{list-style:none;line-height:36px;font-size:14px;padding-left:10px;border-bottom:1px solid #ddd;} .menu ul li:hover{background:#647E7C;color:#fff;} /*end menu*/ #zb{font-size:30px;color:#fff;text-align:center;}</style><body> <!--menu start--> <div class="menu"> <ul> <li onclick="tz_menu(1);">添加应用</li> <li onclick="tz_menu(2);">获取课程</li> <li onclick="tz_menu(3);">添加笔记</li> <li onclick="tz_menu(4);">刷新</li> <li onclick="tz_menu(5);">上传资料</li> <li onclick="tz_menu(6);">更换背景</li> <li onclick="tz_menu(7);">注销</li> </ul> </div> <!--end menu--> <p id="zb"></p><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 屏蔽浏览器自带的右键 document.oncontextmenu = function(){ return false; } // 点击鼠标键 $(document).mousedown(function(e){ // 鼠标键 1(左键)，2鼠标滚轮，3右键 var key = e.which; // 点击鼠标右键 if(key == 3){ var x = e.clientX; // x 横坐标 var y = e.clientY; // y 纵坐标 // $("#zb").html("x = " + x + " , y = " + y); 显示坐标值 // 获取menu的宽度和高度 var menuHeight = $(".menu").height(); var menuWidth = $(".menu").width(); // 获取浏览器的可见高度和宽度 var clientHeight = getClientHeight(); var clientWidth = getClientWidth(); // 判断 if(menuHeight + y > clientHeight){ y = clientHeight - menuHeight - 5; } if(menuWidth + x > clientWidth){ x = clientWidth - menuWidth - 5; } $(".menu").show().css({left:x,top:y}); } }); // 点击空白区域 隐藏鼠标右键 $(document).click(function(){ $(".menu").hide(); }); // 点击每一项右键所需要执行的方法 function tz_menu(i){ if(i == 1){ alert("添加应用"); } else if(i == 2){ alert("获取课程"); } } // 浏览器的可见高度 function getClientHeight() { var clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } return clientHeight; } // 浏览器的可见宽度 function getClientWidth() { var clientWidth = 0; if (document.body.clientWidth && document.documentElement.clientWidth) { clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth; } else { clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth; } return clientWidth; }</script></body>
效果：
第十二节（项目实战2-桌面）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。