首页 > 文章 > web前端 > jQuery右下角旋转环状菜单特效的实现

jQuery右下角旋转环状菜单特效的实现

不言原创: 2018-07-02 14:55:121551浏览

这篇文章主要介绍了关于jQuery右下角旋转环状菜单特效的实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

jquery实现右下角旋转环形菜单特效代码，是固定在页面右下角位置，当用户点击了主菜单按钮后，子菜单项会以环状旋转进入页面，并使用animate.css制作动画效果，有需要的朋友可以参考下

jquery实现右下角旋转环形菜单特效代码，是固定在页面右下角位置，当用户点击了主菜单按钮后，子菜单项会以环状旋转进入页面，并使用animate.css制作动画效果。
效果图如下：

html代码：

<p class="htmleaf-container">
 <p id=&#39;ss_menu&#39;>
  <p>
  <i class="fa fa-qq"></i>
  </p>
  <p>
  <i class="fa fa-weibo"></i>
  </p>
  <p>
  <i class="fa fa-weixin"></i>
  </p>
  <p>
  <i class="fa fa-renren"></i>
  </p>
  <p class=&#39;menu&#39;>
  <p class=&#39;share&#39; id=&#39;ss_toggle&#39; data-rot=&#39;&#39;>
   <p class=&#39;circle&#39;></p>
   <p class=&#39;bar&#39;></p>
  </p>
  </p>
 </p>
</p>

js代码：

$(document).ready(function (ev) {
 var toggle = $(&#39;#ss_toggle&#39;);
 var menu = $(&#39;#ss_menu&#39;);
 var rot;
 $(&#39;#ss_toggle&#39;).on(&#39;click&#39;, function (ev) {
  rot = parseInt($(this).data(&#39;rot&#39;)) - 180;
  menu.css(&#39;transform&#39;, &#39;rotate(&#39; + rot + &#39;deg)&#39;);
  menu.css(&#39;webkitTransform&#39;, &#39;rotate(&#39; + rot + &#39;deg)&#39;);
  if (rot / 180 % 2 == 0) {
   toggle.parent().addClass(&#39;ss_active&#39;);
   toggle.addClass(&#39;close&#39;);
  } else {
   toggle.parent().removeClass(&#39;ss_active&#39;);
   toggle.removeClass(&#39;close&#39;);
  }
  $(this).data(&#39;rot&#39;, rot);
 });
 menu.on(&#39;transitionend webkitTransitionEnd oTransitionEnd&#39;, function () {
  if (rot / 180 % 2 == 0) {
   $(&#39;#ss_menu p i&#39;).addClass(&#39;ss_animate&#39;);
  } else {
   $(&#39;#ss_menu p i&#39;).removeClass(&#39;ss_animate&#39;);
  }
 });
});

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

jQuery右下角旋转环状菜单特效的实现

相关文章