jQuery页面鼠标点击右键弹出菜单代码



136 540 181



特效描述:页面鼠标点击 右键弹出菜单,

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

2. HTML代码

<script type="text/javascript">
var kyoPopupMenu={};
	kyoPopupMenu = (function(){
    return {
        sys: function (obj) {
			$('.popup_menu').remove();
            popupMenuApp = $('<div class="popup_menu app-menu"><ul><li><a menu="menu1">第九站长</a></li><li><a menu="menu2">百度</a></li><li><a menu="menu3">新浪</a></li></ul></div>')
			.find('a').attr('href','javascript:;')
			.end().appendTo('body');
			//绑定事件
			$('.app-menu a[menu="menu1"]').on('click', function (){
				window.location.href="http://www.17sucai.com";
            });
			$('.app-menu a[menu="menu2"]').on('click', function (){
				window.location.href="http://www.baidu.com";
            });
			$('.app-menu a[menu="menu3"]').on('click', function (){
				 window.location.href="http://www.sina.com.cn";
            });
			return popupMenuApp;
		}
	}})();
	//取消右键
	$('html').on('contextmenu', function (){return false;}).click(function(){
		$('.popup_menu').hide();
	});
	//桌面点击右击
    $('html').on('contextmenu',function (e){
    	var popupmenu = kyoPopupMenu.sys();
      	l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
      	t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
      	popupmenu.css({left: l,top: t}).show();
      	return false;
    });
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到