您的位置:首页 - 教程 - 网页特效 - 正文
游戏风格的jQuery右键环形菜
效果展示

PC用户右键弹出环形菜单。

手机用户扫描二维码:


长安可以弹出环形菜单。

源代码下载:
http://hovertree.com/h/bjaf/dhsxao5e.htm

HTML代码如下:
<!doctype html>
<html>
<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" />
<title>游戏风格的jQuery右键环形菜单_何问起</title>
<meta name="Author" content="何问起">
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/86/css/GalMenu.css" />
<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/86/js/GalMenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').GalMenu({
'menu': 'GalDropDown'
})
});
</script>
</head>
<body>
<div class="GalMenu GalDropDown">
<div class="circle" id="gal">
<div class="ring">
<a href="http://hovertree.com/" title="首页" class="menuItem">首页</a>
<a href="http://hovertree.com/game/" target="_blank" title="博客" class="menuItem">游戏</a>
<a href="http://hovertree.com/menu/webfront/" target="_blank" title="" class="menuItem">前端</a>
<a href="http://hovertree.com/menu/texiao/" target="_blank" title="" class="menuItem">特效</a>
<a href="http://hovertree.com/tiku/" target="_blank" title="" class="menuItem">题库</a>
<a href="http://hovertree.com/guestbook/add/" target="_blank" title="留言" class="menuItem">留言</a>
</div>
<audio id="audio" src="http://cms.hovertree.com/hovertreesound/hovertreeright.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="container">
<h1>鼠标右键一次打开菜单,再次右键关闭菜单,鼠标移出菜单后点击左键也可关闭菜单。</h1>
<h1>手机用户:长按=右键,点击=左键</h1>
</div>
</body>
</html>

评论:
  • 2016-11-06 12:56 能发下代码吗
  • 2016-11-06 18:26 已经加了源代码,以及源代码等资料下载,详情请看正文