jQuery右下角旋轉環(huán)狀菜單特效代碼
更新時間：2015年08月10日 14:53:18 作者：拎壺充
jquery實現右下角旋轉環(huán)形菜單特效代碼，是固定在頁面右下角位置，當用戶點擊了主菜單按鈕后，子菜單項會以環(huán)狀旋轉進入頁面，并使用animate.css制作動畫效果，有需要的朋友可以參考下
jquery實現右下角旋轉環(huán)形菜單特效代碼，是固定在頁面右下角位置，當用戶點擊了主菜單按鈕后，子菜單項會以環(huán)狀旋轉進入頁面，并使用animate.css制作動畫效果。
效果圖如下：
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');
}
});
});
相關文章
這篇文章主要介紹了ES6知識點整理之模塊化的應用,結合實例形式分析了基于node.js環(huán)境下模擬ES6模塊化配置與使用相關操作技巧,需要的朋友可以參考下2019-04-04
詳述 Sublime Text 打開 GBK 格式中文亂碼的解決方法
這篇文章主要介紹了詳述 Sublime Text 打開 GBK 格式中文亂碼的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了如何基于JavaScript構建一個動態(tài)博客應用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要介紹了JS寫滑稽笑臉運動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了JS回調函數 callback的理解與使用,結合具體案例形式分析了javascript回調函數的功能、原理、用法及相關操作注意事項,需要的朋友可以參考下2019-09-09
首先說明一下：Js中的作用域不同于其他語言的作用域，要特別注意2012-04-04
sessionStorage存儲時多窗口之前能否進行狀態(tài)共享解析
這篇文章主要為大家介紹了sessionStorage存儲時多窗口之前能否進行狀態(tài)共享解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了原生JavaScript實現九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
Javascript實現的分頁函數...2007-02-02
這篇文章主要介紹了JS實現AES加密并與PHP互通的方法,結合實例形式分析了javascript與php的加密、解密算法相關操作技巧,需要的朋友可以參考下2017-04-04