最开始是为 Huddle.com 网站开发的, grumble.js 是一个很特别的提示控件,它没有通常的north/east/south/west的定位限制。
任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后,它能在IE6+这些古董浏览器上工作,更不用FF、Chrome这些现代的浏览器了!
grumble.js 其实是一个jQuery插件,可以在 脚本之家找到源码下载。
$('h1').grumble({
text: 'Bubble-tastic!',
angle: 85,
distance: 100,
showAfter: 500
});
案例
点这里就能看到以下代码实现的grumble动画。
无文本 可选样式 带有关闭按钮 超大文本区$('#grumble1').grumble(
{
text: '',
angle: 200,
distance: 3,
showAfter: 1000,
hideAfter: 2000
}
);
$('#grumble2').grumble(
{
text: 'Ohh, blue...',
angle: 180,
distance: 0,
showAfter: 2000,
type: 'alt-',
hideAfter: 2000
}
);
$('#grumble3').grumble(
{
text: 'Click me!',
angle: 150,
distance: 3,
showAfter: 3000,
hideAfter: false,
hasHideButton: true,
buttonHideText: 'Pop!'
}
);
$('#grumble4').grumble(
{
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
}
);
);
