PC使用者右鍵彈出環形菜單。
手機使用者掃描二維碼:
長安可以彈出環形菜單。
<!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>