首页 >web前端 >css教程 >css3+jQuery实现仿游戏网站右键环形菜单

css3+jQuery实现仿游戏网站右键环形菜单

黄舟原创: 2017-05-28 11:56:561501浏览

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() {
        $(&#39;body&#39;).GalMenu({
          &#39;menu&#39;: &#39;GalDropDown&#39;
        })
      });
    </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(&#39;.menuItem&#39;);
      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>

以上是css3+jQuery实现仿游戏网站右键环形菜单的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css3+jquery实现问卷答题卡翻页动画效果下一篇：纯css3实现3D图片立方体旋转动画特效

查看更多