Heim >Web-Frontend >CSS-Tutorial >CSS3+jQuery implementiert das Rechtsklick-Ringmenü zur Nachahmung einer Spiele-Website
CSS3+jQuery implementiert das Rechtsklick-Ringmenü zur Nachahmung einer Spiele-Website
- 黄舟Original
- 2017-05-28 11:56:561522Durchsuche
PC-Benutzer klicken mit der rechten Maustaste, um ein Ringmenü aufzurufen.
Mobiltelefonnutzer scannen den QR-Code: 
Changan kann ein Ringmenü öffnen.
<!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>
Das obige ist der detaillierte Inhalt vonCSS3+jQuery implementiert das Rechtsklick-Ringmenü zur Nachahmung einer Spiele-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3 + JQuery realisiert den Animationseffekt zum Umblättern der Fragebogen-AntwortkarteNächster Artikel：CSS3 + JQuery realisiert den Animationseffekt zum Umblättern der Fragebogen-Antwortkarte