当前位置：首页 > 网页特效 > 弹出层

纯js超酷消息提示框插件notice.js

分类：弹出层日期：2024-05-14 点击(0) 评论(0)

简介

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插件。

```html
bower install notice.js --save
npm install notice.js --save     
```             
####  使用方法

------------

在页面中引入noticejs.css和noticejs.js文件。

```html
<link href="dist/noticejs.css" rel="stylesheet" type="text/css">
<script src="dist/noticejs.js"></script>   
```   
####  初始化插件
notice.js消息提示框插件最基本的用法如下：

```html
new NoticeJs({
    text: 'Notification message',
    position: 'topLeft',
}).show();            
```   
你也可以结合animate.css来为消息通知框添加炫酷的CSS3动画效果。

在页面中引入animate.css文件。
```html

```html
new NoticeJs({
    text: 'Notification message',
    position: 'topLeft',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    }
}).show(); 
```

web299.com

纯js超酷消息提示框插件notice.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果