jQuery圆形气泡提示框插件


jQuery圆形气泡提示框插件
jQuery圆形气泡提示框插件以及圆形气泡、提示框等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/grumble.min.css?v=5">

2. 引入JS

<script src="http://libs.51qianduan.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.grumble.min.js"></script>

3. HTML代码

	<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>
	<script type="text/javascript">
		$('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>

相关推荐

发表评论

相关文章