Implementierung des Spezialeffekts des rotierenden Ringmenüs in der unteren rechten Ecke von jQuery-js-Tutorial-php.cn

Implementierung des Spezialeffekts des rotierenden Ringmenüs in der unteren rechten Ecke von jQuery

不言

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

Original

1651 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Implementierung des Spezialeffekts des rotierenden Ringmenüs in der unteren rechten Ecke vor. Jetzt kann ich ihn mit Ihnen teilen

jquery realisiert die Drehung der unteren rechten Ecke des Ringmenüs. Wenn der Benutzer auf die Hauptmenüschaltfläche klickt, werden die Untermenüelemente in einem Ring gedreht. und verwenden Sie animate.css, um Animationseffekte zu erstellen.

jquery implementiert den Spezialeffektcode des rotierenden Ringmenüs in der unteren rechten Ecke, der in der unteren rechten Ecke fixiert ist Wenn der Benutzer auf die Hauptmenüschaltfläche klickt, drehen sich die Untermenüelemente ringförmig auf der Seite und verwenden animate.css, um Animationen zu erstellen.
Das Rendering ist wie folgt:

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, der für das weitere Lernen hilfreich ist Inhalt, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Einführung in ein einfaches jQuery-Diashow-Plug-in (jquery-slider) basierend auf JSON-Formatdaten

So laden Sie den Navigationsverlauf, wenn Sie die mobile jQuery-Klassenbibliothek verwenden

Einführung in JQuery, das die Höhe von Beschriftungselementen auf den Prozentsatz des Bildschirms einstellt

Das obige ist der detaillierte Inhalt vonImplementierung des Spezialeffekts des rotierenden Ringmenüs in der unteren rechten Ecke von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!