Implémentation de l'effet spécial du menu en anneau rotatif dans le coin inférieur droit de jQuery

Cet article présente principalement l'implémentation de l'effet spécial du menu en anneau rotatif dans le coin inférieur droit de jQuery. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

jquery réalise la rotation du coin inférieur droit. Le code d'effet spécial du menu en anneau est fixé dans le coin inférieur droit de la page. Lorsque l'utilisateur clique sur le bouton du menu principal, les éléments du sous-menu pivotent dans la page en anneau. et utilisez animate.css pour créer des effets d'animation. Les amis dans le besoin peuvent se référer à ce qui suit

jquery implémente le code d'effet spécial du menu en anneau rotatif dans le coin inférieur droit, qui est fixé dans le coin inférieur droit de la page. Lorsque l'utilisateur clique sur le bouton du menu principal, les éléments du sous-menu pivotent dans la page dans un anneau et utilisent animate.css pour créer un effet d'animation.
Le rendu est le suivant :

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

Code js :

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. . Pour plus de contenu connexe, veuillez suivre le site Web chinois de PHP !

Recommandations associées :

Introduction à un simple plug-in de diaporama jQuery (jquery-slider) basé sur des données au format JSON

Comment charger l'historique de navigation lors de l'utilisation de la bibliothèque de classes mobile jQuery

Introduction à jquery définissant la hauteur des éléments d'étiquette en pourcentage de l'écran

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!