jQuery自定義方向氣泡提示框代碼是一款可以將提示框放到它所圍繞元素的任意角度的位置，多個grumble可以通過FX隊列實現動畫效果。
最開始是為網站開發的, grumble.js 是一個很特別的提示控件，它沒有通常的north/east/south/west的定位限制。
任何一個grumble都可以放到它所圍繞元素的任意角度的位置，360度全方位無死角，無殘留。還能指定任意距離，應用任意CSS樣式。 對於任意文本還可以自動調整大小。 多個grumble可以通過FX隊列實現動畫效果。 queues for animating multiple grumbles. 最後，它能在IE6+這些古董浏覽器上工作，更不用說FF、Chrome這些現代的浏覽器了！
效果展示
簡單使用例子：
$('h1').grumble({
text: 'Bubble-tastic!',
angle: 85,
distance: 100,
showAfter: 500
});
擺動例子：
<link rel="stylesheet" href="http://hovertree.com/texiao/layer/6/css/grumble.min.css?v=5">
<script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/layer/6/js/jquery.grumble.min.js?v=7"></script>
<a href="http://hovertree.com/texiao/layer/6/" id="hovertreegrumble" target="_blank">點擊這裡看看</a>
<script>
var $hovertreegrumble= $('#hovertreegrumble'), interval;
$hovertreegrumble.grumble(
{
angle: 150,
text: '推薦',
distance: 2,
onShow: function(){
var angle = 130, dir = 1;
interval = setInterval(function(){
(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
$hovertreegrumble.grumble('adjust',{angle: angle});
},25);
},
onHide: function(){
clearInterval(interval);
}
}
);
</script>
完整代碼如下：
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="zh"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="zh"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="zh"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="zh"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery自定義方向氣泡提示框代碼 - 何問起</title>
<base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/layer/6/css/grumble.min.css?v=5">
<style>
body {
font-size: 16px;
line-height: 24px;
background: #fff;
color: #330;
}
#container {
width: 690px;
margin: 5px auto;
}
p, li {
margin: 16px 0 16px 0;
width: 550px;
}
p.break {
margin-top: 35px;
}
.contact {
background: transparent;
color: #441;
}
.contact:active, .contact:hover {
background: transparent;
}
h1#demo1{
margin-top: 40px;
display:inline-block;
}
b.header {
font-size: 18px;
}
span.alias {
font-size: 14px;
font-style: italic;
margin-left: 20px;
}
table {
margin: 16px 0; padding: 0;
}
tr, td {
margin: 0; padding: 0;
}
td {
padding: 9px 15px 9px 0;
}
td.definition {
line-height: 18px;
font-size: 14px;
}
code, pre, tt {
font-family: Consolas, "Lucida Console", monospace;
font-size: 12px;
line-height: 18px;
color: #444;
}
code {
margin-left: 20px;
}
pre {
font-size: 12px;
padding: 2px 0 2px 12px;
border-left: 6px solid hotpink;
margin: 0px 0 10px;
}
li pre {
padding: 0;
border-left: 0;
margin: 6px 0 6px 0;
}
#diagram {
margin: 20px 0 0 0;
}
.hovertreeinfo{text-align:center;clear:both;width:99%;}
.hovertreeinfo p{text-align:center;width:99%;}
.hovertreeinfo a{color:blue}
</style>
<style>
.ex {
display:inline-block;
width: 150px;
padding-left:10px;
height:30px;
border:1px solid #ddd;
font-size: 12px;
}
.grumble-button {
font-size:11px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="demo1">grumble.js</h1>
</header>
<div id="main" role="main">
<h2>Examples</h2>
<p>下面是一組氣泡動畫效果，<a href="#" id="ex1">點擊這裡</a>來查看效果。</p>
<span class="ex" id="grumble1">沒有文字</span>
<span class="ex" id="grumble2">不同的樣式</span>
<span class="ex" id="grumble3">帶關閉按鈕</span>
<span class="ex" id="grumble4">大氣泡效果</span>
<br/><br/>
<pre>
$('#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,
}
);
);</pre>
</div>
<p>
Can I haz callbacks? Sure.
</p>
<pre>
$('#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');
}
});
</pre>
<h2 id="thedarkside">The darkside of grumble.js</h2>
<p>
grumble.js 暴露了三個方法：'show'、'hide' 和 'adjust'。adjust方法可以用來更新grumble的位置或角度。
</p>
<p>
Warning: Clicking on this link may damage your <abbr title="User Experience">UX</abbr>. <a href="#" id="darkside">點擊這裡看看(:p)</a>
</p>
<pre>
$('#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);
}
}
);
});
</pre>
</div> <!-- eo #container -->
<script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/layer/6/js/jquery.grumble.min.js?v=7"></script>
<script>
$('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);
}
}
);
});
</script>
<div class="hovertreeinfo">
<p>適用浏覽器：FireFox、Edge、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏覽器. 不支持IE8及以下浏覽器。</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/grumble.htm">代碼說明</a></p>
</div>
</body>
</html>