这是一个基于easing动画插件的圆形气泡菜单插件。当鼠标悬浮圆形菜单上,菜单会变成一个更大的菜单。

查看演示
下载资源:
75
次 下载资源
下载积分:
20
积分
圆形菜单html
引入easing动画插件
悬浮和离开菜单效果 $(function() {
$('#nav > div').hover(
function() {
var $this = $(this);
$this.find('img').stop().animate({
'width': '199px',
'height': '199px',
'top': '-25px',
'left': '-25px',
'opacity': '1.0'
}, 500, 'easeOutBack', function() {
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function() {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width': '52px',
'height': '52px',
'top': '0px',
'left': '0px',
'opacity': '0.1'
}, 5000, 'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
这是一个展示如何使用easing动画插件创建圆形气泡菜单的示例。当鼠标悬停在菜单上时,菜单会扩展并淡入显示更多选项,移开鼠标后则逐渐收缩并淡出。此效果通过jQuery实现,包括图片尺寸变化、位置调整及透明度动画。

378

被折叠的 条评论
为什么被折叠?



