仿Key社游戏风格jQuery右键菜单_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

GalMenu.js是一款仿Key社游戏风格的右键菜单特效jQuery插件。该插件将原生的浏览器右键菜单转换为一个动画的圆形菜单，并且带音效，效果非常的炫酷。

Key社游戏是ビジュアルアーツ(Visual Art's)旗下的一个品牌，它位于日本大阪市的一所游戏制作公司，以制作感人的Galgame而著称于业界。Key最著名的四季四部曲---春之《Clannad》、夏之《Air》、秋之《One~辉之季节~》、冬之《Kanon》。

使用方法

在页面中引入GalMenu.css，jquery和GalMenu.js文件。

<link rel="stylesheet" href="css/GalMenu.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/GalMenu.js"></script>

HTML结构

使用下面的代码作为右键菜单的HTML结构：

<div class="GalMenu GalDropDown">
  <div class="circle" id="gal">
    <div class="ring">
      <a href="#" title="Home" class="menuItem">Home</a>
      <a href="#" title="Blog" class="menuItem">Blog</a>
      <a href="#" title="About" class="menuItem">About</a>
      <a href="#" title="Contact" class="menuItem">Contact</a>
      <a href="#" title="Social" class="menuItem">Social</a>
      <a href="#" title="Other" class="menuItem">other</a></div>
  </div>
</div>

然后创建一个全屏的遮罩层，用于在右键菜单出现时，作为屏幕的遮罩。

<div id="overlay" style="opacity: 1; cursor: pointer;"></div>

CSS样式

为右键菜单的菜单项设置背景图片。

.ring a:nth-of-type(1) { background-image: url("1.jpg"); }

.ring a:nth-of-type(2) { background-image: url("2.jpg"); }

.ring a:nth-of-type(3) { background-image: url("3.jpg"); }

.ring a:nth-of-type(4) { background-image: url("4.jpg"); }

.ring a:nth-of-type(5) { background-image: url("5.jpg"); }

.ring a:nth-of-type(6) { background-image: url("6.jpg"); }

初始化插件

在页面DOM元素加载完毕之后，通过GalMenu()方法来初始化该右键菜单插件。

$('body').GalMenu({
  'menu': 'GalDropDown'
})

通过下面的JS代码来是菜单项形成一个圆形。

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) + "%"
  }