Implementation of the special effect of rotating ring menu in the lower right corner of jQuery-JS Tutorial-php.cn

Implementation of the special effect of rotating ring menu in the lower right corner of jQuery

不言

Release： 2018-07-02 14:55:12

Original

1554 people have browsed it

This article mainly introduces the implementation of the special effect of the rotating ring menu in the lower right corner of jQuery. It has a certain reference value. Now I share it with you. Friends in need can refer to it

jquery realizes the rotation of the lower right corner The ring menu special effects code is fixed at the lower right corner of the page. When the user clicks the main menu button, the submenu items will rotate into the page in a ring shape, and use animate.css to create animation effects. Friends in need can refer to the following

jquery implements the special effect code for the rotating ring menu in the lower right corner, which is fixed at the lower right corner of the page. When the user clicks the main menu button, the submenu items will rotate into the page in a ring, and use animate.css to create animations Effect.
The rendering is as follows:

##html code:

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

Copy after login

js code:

$(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;);
  }
 });
});

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website !

Related recommendations:

Introduction to a simple jQuery slideshow plug-in (jquery-slider) based on JSON format data

How to load navigation history when using jQuery mobile class library

Introduction to jquery setting the height of label elements to the percentage of the screen

The above is the detailed content of Implementation of the special effect of rotating ring menu in the lower right corner of jQuery. For more information, please follow other related articles on the PHP Chinese website!