Maison >interface Web >tutoriel CSS >css3+jQuery réalise le menu en anneau contextuel du site Web de jeux d'imitation
css3+jQuery réalise le menu en anneau contextuel du site Web de jeux d'imitation
- 黄舟original
- 2017-05-28 11:56:561514parcourir
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：css3+jquery réalise l'effet d'animation de changement de page de la carte de réponse au questionnaireArticle suivant：css3+jquery réalise l'effet d'animation de changement de page de la carte de réponse au questionnaire