当前位置：首页 > 网页特效 > 其他

仿Twitter简洁的页面顶部消息提示栏插件

分类：其他日期：2024-05-14 点击(6) 评论(0)

简介

使用该消息提示栏插件需要在页面中引入jquery.notifyBar.css和jquery，以及jquery.notifyBar.js文件。

```html
<link rel="stylesheet" href="css/jquery.notifyBar.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.notifyBar.js"></script>    
```              
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化一个消息提示栏组件。

```html
jQuery(function () {
  jQuery.notifyBar({
    html: "这里是消息提示栏的提示消息！",
    delay: 2000,
    animationSpeed: "normal"
  });  
});     
```            
你也可以将消息提示栏的位置设置在页面的底部。

```html
jQuery(function () {
  jQuery.notifyBar({
    html: "Hi from below!",
    cssClass: "Appear at bottom",
    position: "bottom"
  });
});       
```           
#####  配置参数
该消息提示栏插件的可用配置参数有：

|  参数| 类型  | 默认值  |  描述 |
| ------------ | ------------ | ------------ | ------------ |
|html|String（可选）|"Your message here"|消息提示栏中的文本消息|
|delay|Integer（可选）|2000|延迟的时间，动画时间不计在内|
|animationSpeed|String , Integer|"normal"|消息提示栏滑动显示的时间|
|jqObject|jquery对象（可选）|null|为消息提示栏自定义jquery对象|
|cssClass|String|""|自定义的消息提示栏CSS样式，预定义的class名称有："error", "warning" 和 "success"|
|close|Boolean|false|设置为true会显示一个关闭按钮|
|closeText|String|"Close [X]"|设置关闭按钮的文本|
|closeOnClick|Boolean|true|是否点击消息提示栏时关闭它|
|closeOnOver|Boolean|false|是否在鼠标滑过消息提示栏时关闭它|
|waitingForClose|Boolean|true|是否在等待一段时间后自动关闭提示栏|
|onBeforeShow|function|null|消息提示栏显示前的回调函数|
|onShow|function|null|消息提示栏显示后的回调函数|
|onBeforeHide|function|null|消息提示栏隐藏前的回调函数|
|onHide|function|null|消息提示栏隐藏后的回调函数|
|position|string|"top"|设置消息提示栏的位置，可选位置有：top, bottom|

web299.com

仿Twitter简洁的页面顶部消息提示栏插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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