html气泡插件,jQuery圆形气泡提示框插件

最新推荐文章于 2022-02-26 09:45:52 发布

腓特烈招谁惹谁了

最新推荐文章于 2022-02-26 09:45:52 发布

阅读量309

点赞数

文章标签： html气泡插件

本文介绍了jQuery圆形气泡提示框插件grumble.js的使用方法，包括如何引入CSS和JS文件，创建HTML代码，以及展示不同类型的气泡动画效果。此外，还详细说明了回调函数的使用和调整气泡位置的方法，提供了丰富的示例代码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特效描述：圆形气泡提示框。jQuery圆形气泡提示框插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

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

}

);

});

$('h1#demo1').grumble(

{

text: 'Bubble-tastic!',

angle: 85,

distance: 100,

showAfter: 500

}

);

var isSequenceComplete = true;

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

e.preventDefault();

if(isSequenceComplete === false) return true;

isSequenceComplete = false;

$('#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, // just shows the button

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,

onHide: function(){

isSequenceComplete = true;

}

);

});

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

}

);

});