notice.js消息提示框插件

notice.js消息提示框插件是一款纯js编写的网页消息通知框，可以设置出现的位置，有多种提示动画效果和带进度显示。

分类：文字特效 > 提示文字难易：初级

查看演示下载资源下载积分： 20 积分

js代码

<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/notice.js"></script>
<script type="text/javascript">
		$("#btn1").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topLeft',
			}).show();
		});

		$("#btn2").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topCenter',
			    animation: {
			        open: 'animated bounceInRight',
			        close: 'animated bounceOutLeft'
			    }
			}).show();
		});

		$("#btn3").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topRight',
			    animation: {
			        open: 'animated bounceIn',
			        close: 'animated bounceOut'
			    }
			}).show();
		});

		$("#btn4").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleLeft',
			    animation: {
			        open: 'animated fadeIn',
			        close: 'animated fadeOut'
			    }
			}).show();
		});

		$("#btn5").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleCenter',
			    animation: {
			        open: 'animated lightSpeedIn',
			        close: 'animated lightSpeedOut'
			    }
			}).show();
		});

		$("#btn6").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleRight',
			    animation: {
			        open: 'animated zoomIn',
			        close: 'animated zoomOut'
			    }
			}).show();
		});

		$("#btn7").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomLeft',
			    animation: {
			        open: 'animated flipInX',
			        close: 'animated flipOutX'
			    }
			}).show();
		});

		$("#btn8").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomCenter',
			    animation: {
			        open: 'animated rollIn',
			        close: 'animated rollOut'
			    }
			}).show();
		});

		$("#btn9").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomRight',
			    animation: {
			        open: 'animated bounceIn',
			        close: 'animated bounceOut'
			    }
			}).show();
		});
		
</script>