html旋转的环形菜单,jQuery右下角旋转环状菜单特效代码

jquery实现右下角旋转环形菜单特效代码，是固定在页面右下角位置，当用户点击了主菜单按钮后，子菜单项会以环状旋转进入页面，并使用animate.css制作动画效果。

效果图如下：

html代码：

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

}

});

});