游戲風格的jQuery右鍵環形菜
編輯：網頁特效代碼
效果展示
PC用戶右鍵彈出環形菜單。
手機用戶掃描二維碼：
長安可以彈出環形菜單。
源代碼下載：
http://hovertree.com/h/bjaf/dhsxao5e.htm
HTML代碼如下：
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>小編推薦
熱門推薦