jQuery css3仿游戲網站右鍵環形菜單代碼



112 446 149



特效描述:游戲網站菜單 右鍵環形菜單,jQuery css3右鍵菜單,K社游戲風格。旋轉彈出收回菜單,有菜單彈出音效,彈出有遮罩層,支持移動端。(不兼容IE6,7,8)

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/GalMenu.css" />

2. 引入JS

<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/GalMenu.js"></script>

3. HTML代碼

    <div class="GalMenu GalDropDown">
      <div class="circle" id="gal">
        <div class="ring">
          <a href="javascript:void(0);" title="首頁" class="menuItem">首頁</a>
          <a href="javascript:void(0);" target="_blank" title="博客" class="menuItem">博客</a>
          <a href="javascript:void(0);" target="_blank" title="" class="menuItem">后宮</a>
          <a href="javascript:void(0);" target="_blank" title="" class="menuItem">雜貨</a>
          <a href="javascript:void(0);" target="_blank" title="" class="menuItem">洗腦</a>
          <a href="javascript:void(0);" target="_blank" title="留言" class="menuItem">留言</a>
		</div>
        <audio id="audio" src="audio/niconiconi.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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 浮動菜單 浮動導航
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子