最开始是为 Huddle.com 网站开发的, grumble.js 是一个很特别的提示控件,它没有通常的north/east/south/west的定位限制。
任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留。还能指定任意距离,应用任意CSS样式。 对于任意文本还可以自动调整大小。 多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles. 最后,它能在IE6+这些古董浏览器上工作,更不用FF、Chrome这些现代的浏览器了!
grumble.js 其实是一个jQuery插件,可以在 Github找到源码。
$('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, } ); );