Rumah > Artikel > hujung hadapan web > css3+jQuery实现仿游戏网站右键环形菜单

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

黄舟asal: 2017-05-28 11:56:561466semak imbas

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>

Atas ialah kandungan terperinci css3+jQuery实现仿游戏网站右键环形菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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

Artikel berkaitan

Lihat lagi