您的位置:首页 - 教程 - 网页特效 - 正文
grumble.js气泡jQuery特效
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>

评论: