Maison > Article > interface Web > css3+jQuery réalise le menu en anneau contextuel du site Web de jeux d'imitation
Les utilisateurs de PC font un clic droit pour faire apparaître un menu en anneau.
Les utilisateurs de téléphones portables scannent le code QR :
Changan peut afficher un menu en sonnerie.
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!