jQuery实现可以控制在一定区域内的鼠标右键弹出菜单效果.zip资源-CSDN文库

共7个文件

png：5个

html：1个

js：1个

版权申诉

jquery

146 浏览量 2022-11-07 23:55:48 上传评论收藏 65KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现可以控制在一定区域内的鼠标右键弹出菜单效果.zip （7个子文件）

132686932727372041

jquery.js 160KB

images

twitter.png 2KB

facebook.png 4KB

myspace.png 4KB

feed.png 4KB

mail.png 3KB

index.html 3KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代码,右键菜单,上下文菜单,关联菜单,sharejs.com菜单,jQuery菜单" /> <meta name="description" content="jQuery实现的超牛鼠标右键菜单效果，更多右键菜单,sharejs.com,上下文菜单,关联菜单,jQuery菜单请访问脚本之家JS代码频道。" /> <title>jQuery实现的超牛鼠标右键菜单效果_脚本之家</title> <script src="jquery.js"></script>  <style type="text/css"> #mask { position:absolute; left:0; top:0; z-index:9000; display:block; } #myMenu{ position:absolute; display:none; z-index:9999; background:yellow; border:1px solid; width:200px; height:155px; } #textbox{ background:orange; width:380px; border:2px solid; } /* http://www.sharejs.com */ img { height:30px; width:30px; } td{ font-size:20px; cursor:pointer; } a{ text-decoration:none; color:black; } a:hover{ color:white; background:black; } </style> <script type="text/javascript"> var windowwidth; var windowheight; var checkmenu; //code from http://www.sharejs.com/js/ $(window).ready(function() { $('#myMenu').hide(); $('#textbox').bind("contextmenu",function(e){ windowwidth = $(window).width(); windowheight = $(window).height(); checkmenu = 1; $('#mask').css({ 'height': windowheight, 'width': windowwidth }); $('#myMenu').show(500); $('#myMenu').css({ 'top':e.pageY+'px', 'left':e.pageX+'px' }); return false; }); $('#mask').click(function(){ $(this).height(0); $(this).width(0); $('#myMenu').hide(500); checkmenu = 0; return false; }); $('#mask').bind("contextmenu",function(){ $(this).height(0); $(this).width(0); $('#myMenu').hide(500); checkmenu = 0; return false; }); $(window).resize(function(){ if(checkmenu == 1) { windowwidth = $(window).width(); windowheight = $(window).height(); $('#mask').css({ 'height': windowheight, 'width': windowwidth, }); } }); }); </script> </head> <body > <div id="myMenu" > <table cellspace="3"> <tr> <td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td> </tr> <tr> <td ><img src="images/facebook.png" > </td><td><a href="http://www.jb51.net">facebook share</a></td> </tr> <tr> <td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td> </tr> <tr> <td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td> </tr> </table> </div> <div id="mask"> </div> <div id="textbox"> <p>Howdy, Its Hitesh here, if you love me you can call me Hitz.<p/> <p><b>I'm a <a href="http://www.jb51.net">JavaScript</a> and PHP Programmer.</b><p/> <p>Believe in Simplicity and Smartness at the same time. <p/> <p>I'm dedicated to OPEN SOURCE. Are you? <p/> </div> <div> <div style="text-align:center;clear:both"> <p>来源：<a href="http://www.jb51.net" target="_blank">hiteshjoshi</a>　代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a>　感谢：<a href="http://www.jb51.net" target="_blank">会等</a></p> <p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉