插件描述：js消息提示框插件notice.js,多种提示动画效果，带进度显示。
js消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件。notice.js为纯js编写，没有任何依赖文件。通过它可以在页面上制作出漂亮的toast消息通知框效果。该js消息提示框插件的特点
支持4中情景类型：error， warning， info， success。
消息框可以显示在9个位置：topLeft, topCenter, middleLeft, middleRight, middleCenter, bottomLeft, bottomRight, bottomCenter。
消息框内容支持HTML元素。
可以通过npm或bower来安装notice.js插件。
1 2 | bower install notice.js --savenpm install notice.js --save |
在页面中引入noticejs.css和noticejs.js文件。
1 2 | <link href="dist/noticejs.css" rel="stylesheet" type="text/css"><script src="dist/noticejs.js"></script> |
初始化插件
notice.js消息提示框插件最基本的用法如下：
1 2 3 4 | new NoticeJs({ text: 'Notification message', position: 'topLeft',}).show(); |
你也可以结合animate.css来为消息通知框添加炫酷的CSS3动画效果。
在页面中引入animate.css文件。
1 | <link href="css/animate.css" rel="stylesheet" type="text/css"> |
然后在配置参数中设置animation参数：
1 2 3 4 5 6 7 8 | new NoticeJs({ text: 'Notification message', position: 'topLeft', animation: { open: 'animated bounceInRight', close: 'animated bounceOutLeft' }}).show(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 响应式网格商品展示及加入购物车
- 下一个特效： 跟试卷有关的三个加载动画效果