Home > Article > Web Front-end > css3+jQuery realizes the right-click ring menu of imitation game website

css3+jQuery realizes the right-click ring menu of imitation game website

黄舟Original: 2017-05-28 11:56:561470browse

PC users right-click to pop up the ring menu.

Mobile phone users scan the QR code:

Changan can pop up a ring menu.

<!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>

The above is the detailed content of css3+jQuery realizes the right-click ring menu of imitation game website. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css3+jquery realizes the page turning animation effect of questionnaire answer cardNext article：css3+jquery realizes the page turning animation effect of questionnaire answer card

See more

css3+jQuery realizes the right-click ring menu of imitation game website

Related articles