jQuery带音效圆形右键菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带音效圆形右键菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带音效圆形右键菜单代码</title>
<link rel="stylesheet" href="css/GalMenu.css" />

</head>
<body>
<div class="GalMenu GalDropDown">
	  <div class="circle" id="gal">
		<div class="ring">
		  <a href="#" title="" class="menuItem">首页</a>
		  <a href="#" title="" class="menuItem">博客</a>
		  <a href="#" title="" class="menuItem">项目</a>
		  <a href="#" title="" class="menuItem">综合</a>
		  <a href="#" title="" class="menuItem">杂项</a>
		  <a href="#" title="" class="menuItem">留言</a></div>
		<audio id="audio" src="audio/niconiconi.mp3"></audio>
	  </div>
</div>
<div id="overlay" style="opacity: 1; cursor: pointer;"></div>
<script type="text/javascript">var items = document.querySelectorAll('.menuItem');
  for (var i = 0,
  l = items.length; i < l; i++) {
	items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
	items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
  }</script>
<div class="htmleaf-container">
	<h3 style="text-align: center">鼠标右键看看，右键一次打开菜单，再次右键或者鼠标移出菜单左键关闭菜单</h3>
	<h3 style="text-align: center">手机用户：长按=右键，点击=左键</h3>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/GalMenu.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	$('body').GalMenu({
	  'menu': 'GalDropDown'
	})
  });
</script>
</body>
</html>

JS代码(GalMenu.js):

(function($){
	var GalMenu ={
	defaults:{
	click_to_close:true,stay_open:false}
,init:function(options){
	var o = options,$this = $(this);
	$this.each(function(i){
	var $this = $(this),settings = $.extend({
}
,GalMenu.defaults,o),$menu = $('.' + settings.menu);
	$this.on('mousedown',function(e){
	if (e.which !== 3 && $(e.target).parents('.GalMenu').length < 1 && settings.click_to_close){
	$this.find('.GalMenu').stop(true,false).animate({
	opacity:0}
,{
	duration:100,queue:false,complete:function(){
	$(this).css('display','none').find('.active').removeClass('active').next().stop(true,true).slideUp('normal')}
}
);
	$(".circle").removeClass("open");
	$("#overlay").hide();
	$(".GalMenu").delay(400).hide(0);
	audio.pause();
	audio.currentTime = 0}
}
);
	$this.on('contextmenu',function(e){
	e.preventDefault();
	e.stopPropagation();
	GalMenu.getCoords(e);
	$('.GalMenu_close_me').stop(true,false).animate({
	opacity:0}
,{
	duration:100,queue:false,complete:function(){
	$(this).css('display','none')}
}
);
	var audio = $("#audio")[0];
	var add = 150;
	var top = Coords.clientY - add,left = ($('body')[0] === e.target) ? Coords.clickX - add:Coords.clientX - add;
	//防止菜单超出可见区域，不需要可注释掉 var bodyHe= document.documentElement.clientHeight;
	var bodyWi = document.documentElement.clientWidth;
	if(top<0) top=0;
	if(bodyHe-Coords.clientY<150) top=bodyHe-300;
	if(left<0) left=0;
	if($('body')[0] === e.target){
	if(bodyWi-Coords.clickX<150) left=bodyWi-300}
else{
	if(bodyWi-Coords.clientX<150) left=bodyWi-300}
;
	//防止菜单超出可见区域，不需要可注释掉 $menu.css({
	top:top + 'px',left:left + 'px',display:'block'}
).stop(true,false).animate({
	opacity:1}
,{
	duration:100,queue:false}
);
	if ($("#gal").hasClass("open")){
	$(".circle").removeClass("open");
	$("#overlay").hide();
	$(".GalMenu").delay(400).hide(0);
	audio.pause();
	audio.currentTime = 0}
else{
	$(".circle").addClass("open");
	$("#overlay,.GalMenu").show();
	audio.play()}
}
)}
)}
,getCoords:function(e){
	var evt = e ? e:window.event;
	var clickX = 0,clickY = 0;
	if ((evt.clientX || evt.clientY) && document.body && document.body.scrollLeft != null){
	clickX = evt.clientX + document.body.scrollLeft;
	clickY = evt.clientY + document.body.scrollTop}
;
	if ((evt.clientX || evt.clientY) && document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.scrollLeft != null){
	clickX = evt.clientX + document.documentElement.scrollLeft;
	clickY = evt.clientY + document.documentElement.scrollTop}
;
	if (evt.pageX || evt.pageY){
	clickX = evt.pageX;
	clickY = evt.pageY}
;
	return Coords ={
	clickX:clickX,clickY:clickY,clientX:evt.clientX,clientY:evt.clientY,screenX:evt.screenX,screenY:evt.screenY}
}
}
;
	$.fn.GalMenu = function(method,options){
	if (GalMenu[method]){
	return GalMenu[method].apply(this,Array.prototype.slice.call(arguments,1))}
else if (typeof method === 'object' || !method){
	return GalMenu.init.apply(this,arguments)}
else{
	$.error('Method ' + method + ' does not exist')}
}
}
)(jQuery);
	String.prototype.removeWS = function(){
	return this.toString().replace(/\s/g,'')}
;
	String.prototype.pF = function(){
	return parseFloat(this)}
;
	Number.prototype.pF = function(){
	return parseFloat(this)}
;

CSS代码(GalMenu.css):

@charset "utf-8";html,body{margin:0;padding:0;width:100%;height:100%;}
body{/*font-size:1.4rem;background:#196a73 url("") no-repeat fixed;background-size:cover;*/
font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;outline:0;}
.GalMenu{margin:0;padding:0;display:none;position:fixed;z-index:999;}
.circle,.ring{height:300px;position:relative;width:300px;}
.circle{margin:0 auto;}
.ring{border-radius:50%;opacity:0;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:scale(0.1) rotate(-270deg);-moz-transform:scale(0.1) rotate(-270deg);-transform:scale(0.1) rotate(-270deg);-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}
.open .ring{opacity:1;-webkit-transform:scale(1) rotate(0);-moz-transform:scale(1) rotate(0);-transform:scale(1) rotate(0);}
.center{background-color:rgba(255,255,255,0.3);border-radius:50%;border:2px solid #ffffff;bottom:0;color:white;height:80px;left:0;line-height:80px;margin:auto;position:absolute;right:0;text-align:center;top:0;width:80px;-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}
.open .center{border-color:#aaaaaa;}
.menuItem{border-radius:50%;color:#eeeeee;display:block;height:80px;line-height:80px;margin-left:-41px;margin-top:-41px;position:absolute;text-align:center;width:80px;background-size:80px;border:2px #b59494 solid;box-shadow:0px 0px 15px #fff;-webkit-box-shadow:0px 0px 15px #fff;-moz-box-shadow:0px 0px 15px #fff;}
.menuItem:hover{box-shadow:inset 0px 0px 80px #fff;-webkit-box-shadow:inset 0px 0px 80px #fff;-moz-box-shadow:inset 0px 0px 80px #fff;}
.ring a:nth-of-type(1){background-image:url("../img/1.jpg");}
.ring a:nth-of-type(2){background-image:url("../img/2.jpg");}
.ring a:nth-of-type(3){background-image:url("../img/3.jpg");}
.ring a:nth-of-type(4){background-image:url("../img/4.jpg");}
.ring a:nth-of-type(5){background-image:url("../img/5.jpg");}
.ring a:nth-of-type(6){background-image:url("../img/6.jpg");}
.ring a{display:inline-block;color:#ffffff;text-shadow:#DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0;-webkit-text-shadow:#DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0;-moz-text-shadow:#DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0;*filter:Glow(color=#DC965A,strength=1);}
.ring a:hover{text-shadow:#66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0;-webkit-text-shadow:#66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0;-moz-text-shadow:#66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0;*filter:Glow(color=#66CCFF,strength=1);}
#overlay{height:100%;position:fixed;width:100%;left:0;top:0;background:url("") repeat scroll 0 0 rgba(0,0,0,0.5);display:none;}
.container{width:100%;height:100%;}

附件:下载该文件资源,减少时间成本(增值服务)