给博客添加一个右键菜单

效果可以参考本博客。

在博客园页脚\(html\)代码中添加如下代码即可。

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/wxyww/galm.css" />
	<div class="GalMenu GalDropDown">
	      <div class="circle" id="gal">
	        <div class="ring">
	          <a href="https://www.cnblogs.com/wxyww/" title="" class="menuItem">首页</a>
	          <a href="https://www.cnblogs.com/wxyww/p/10181069.html" title="" class="menuItem">关于</a>
	          <a href="https://www.cnblogs.com/wxyww/p/10050852.html" title="" class="menuItem">日记</a>
	          <a href="https://blog.wxyww.top/yanhua2/" title="" class="menuItem">烟花</a>
	          <a href="https://blog.wxyww.top/" title="" class="menuItem">个人博客</a>
	          <a href="http://wpa.qq.com/msgrd?v=3&uin=2049500915&site=qq&menu=yes" title="" class="menuItem">联系</a></div>
	        <audio id="audio" src="audio/niconiconi.mp3"></audio>
	      </div>
	</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>

	
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="https://blog-static.cnblogs.com/files/wxyww/GalMenu.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
        $('body').GalMenu({
          'menu': 'GalDropDown'
        })
      });</script>
posted @ 2019-04-14 08:29  wxyww  阅读(363)  评论(4编辑  收藏  举报