A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > jQuery右下角旋转环状菜单特效代码

jQuery右下角旋转环状菜单特效代码

时间:2015-08-10 17:09作者:yezheng人气:118

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

jQuery右下角旋转环状菜单特效代码

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


}

});

});
 

标签jQuery,右下角,旋转,环状,菜单,特效,代码,jque

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号