快捷導(dǎo)航

jQuery右下角旋轉(zhuǎn)環(huán)狀菜單特效代碼

更新時(shí)間：2015年08月10日 14:53:18 作者：拎壺充

jquery實(shí)現(xiàn)右下角旋轉(zhuǎn)環(huán)形菜單特效代碼，是固定在頁(yè)面右下角位置，當(dāng)用戶點(diǎn)擊了主菜單按鈕后，子菜單項(xiàng)會(huì)以環(huán)狀旋轉(zhuǎn)進(jìn)入頁(yè)面，并使用animate.css制作動(dòng)畫(huà)效果，有需要的朋友可以參考下

jquery實(shí)現(xiàn)右下角旋轉(zhuǎn)環(huán)形菜單特效代碼，是固定在頁(yè)面右下角位置，當(dāng)用戶點(diǎn)擊了主菜單按鈕后，子菜單項(xiàng)會(huì)以環(huán)狀旋轉(zhuǎn)進(jìn)入頁(yè)面，并使用animate.css制作動(dòng)畫(huà)效果。
效果圖如下：

在線預(yù)覽點(diǎn)擊下載

html代碼：

<div class="htmleaf-container">
 <div id='ss_menu'>
  <div>
  <i class="fa fa-qq"></i>
  </div>
  <div>
  <i class="fa fa-weibo"></i>
  </div>
  <div>
  <i class="fa fa-weixin"></i>
  </div>
  <div>
  <i class="fa fa-renren"></i>
  </div>
  <div class='menu'>
  <div class='share' id='ss_toggle' data-rot=''>
   <div class='circle'></div>
   <div class='bar'></div>
  </div>
  </div>
 </div>
</div>

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 div i').addClass('ss_animate');
  } else {
   $('#ss_menu div i').removeClass('ss_animate');
  }
 });
});

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)短信倒計(jì)時(shí)60s
本文給大家分享一段實(shí)例代碼給大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)短信倒計(jì)時(shí)60s功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-10-10
JS非行間樣式獲取函數(shù)的實(shí)例代碼
這篇文章主要介紹了JS非行間樣式獲取函數(shù)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
利用Three.js實(shí)現(xiàn)3D三棱錐立體特效
Three.js是基于原生WebGL封裝運(yùn)行的三維引擎，在所有WebGL引擎中，Three.js是國(guó)內(nèi)文資料最多、使用最廣泛的三維引擎。本文將用Three.js實(shí)現(xiàn)3D三棱錐立體特效，感興趣的可以了解一下
2022-06-06
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法
這篇文章主要介紹了JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法,涉及針對(duì)字符串參數(shù)的處理方法,需要的朋友可以參考下
2016-08-08
JavaScript sort數(shù)組排序方法和自我實(shí)現(xiàn)排序方法小結(jié)
這篇文章主要介紹了JavaScript sort數(shù)組排序方法和自我實(shí)現(xiàn)排序方法小結(jié)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
js微信應(yīng)用場(chǎng)景之微信音樂(lè)相冊(cè)案例分享
這篇文章主要為大家分享了js微信應(yīng)用場(chǎng)景之微信音樂(lè)相冊(cè)案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
js實(shí)現(xiàn)延時(shí)加載Flash的方法
這篇文章主要介紹了js實(shí)現(xiàn)延時(shí)加載Flash的方法,較為詳細(xì)的分析了通過(guò)元素替換實(shí)現(xiàn)JavaScript延時(shí)加載flash的相關(guān)原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
asp.net下利用js實(shí)現(xiàn)返回上一頁(yè)的實(shí)現(xiàn)方法小集
其實(shí)要實(shí)現(xiàn)這個(gè)功能主要還是要用到j(luò)avascript
2009-11-11
原生js結(jié)合html5制作簡(jiǎn)易的雙色子游戲
這篇文章主要介紹了原生js結(jié)合html5制作簡(jiǎn)易的雙色子游戲的代碼，是個(gè)人學(xué)習(xí)練手用的，雖然寫(xiě)的不太好，還是分享給大家，有需要的小伙伴可以參考下。
2015-03-03
簡(jiǎn)單漂亮的js彈窗可自由拖拽且兼容大部分瀏覽器
js彈窗想必大家都有見(jiàn)到過(guò)吧，如何要說(shuō)可以自由拖拽，并兼容大部分瀏覽器的就沒(méi)有幾個(gè)了吧，本文的這個(gè)示例或許是大家要找的，可以參考下
2013-10-10