基于jQuery右下角旋转环状菜单代码。这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.CSS来制作动画效果。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<divclass="htmleaf-container"><divid='ss_menu'><div><iclass="fa fa-QQ"></i></div><div><iclass="fa fa-weibo"></i></div><div><iclass="fa fa-weixin"></i></div><div><iclass="fa fa-renren"></i></div><divclass='menu'><divclass='share'id='ss_toggle'data-rot='180'><divclass='circle'></div><divclass='bar'></div></div></div></div></div>
js代码:
$(document).ready(function(ev) {vartoggle = $('#ss_toggle');varmenu = $('#ss_menu');varrot;
$('#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');
}
});
});
via:http://www.w2bc.com/article/55543