notice.js消息提示框插件

来源:https://www.sucaihuo.com/js/4676.html 2019-08-24 11:23浏览(93) 收藏

notice.js消息提示框插件是一款纯js编写的网页消息通知框,可以设置出现的位置,有多种提示动画效果和带进度显示。
notice.js消息提示框插件
分类:文字特效 > 提示文字 难易:初级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 4 下载资源 下载积分: 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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

1 2