Home >Web Front-end >JS Tutorial >Implementation of the special effect of rotating ring menu in the lower right corner of jQuery

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

不言Original: 2018-07-02 14:55:121654browse

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>

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

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!

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：Introduction to jquery setting the height of a label element to the percentage of the screenNext article：Introduction to jquery setting the height of a label element to the percentage of the screen

See more

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

Related articles