首頁 > 文章 > 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右下角旋轉環狀選單特效的實現

相關文章