html5气泡提示框,可360度旋转的气泡样式jQuery提示框插件

grumble.js

Examples

下面是一组气泡动画效果，点击这里来查看效果。

没有文字

不同的样式

带关闭按钮

大气泡效果

$('#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,

}

);

);

Can I haz callbacks? Sure.

$('#myElement').grumble({

showAfter: 1000,

hideAfter: 2000,

onShow: function(){

console.log('triggered when show animation completes');

},

onBeginHide: function(){

console.log('triggered when hide animation begins');

},

onHide: function () {

console.log('triggered when hide animation completes');

}

});

The darkside of grumble.js

grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。

Warning: Clicking on this link may damage your UX. 点击这里看看(:p)

$('#darkside').click(function(e){

var $me = $(this), interval;

e.preventDefault();

$me.grumble(

{

angle: 130,

text: 'Look at me!',

type: 'alt-',

distance: 10,

hideOnClick: true,

onShow: function(){

var angle = 130, dir = 1;

interval = setInterval(function(){

(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));

$me.grumble('adjust',{angle: angle});

},25);

},

onHide: function(){

clearInterval(interval);

}

}

);

});