jQuery仿iOS7横幅通知提示插件banneralert.js

所属分类：UI-工具提示

39739 373 查看评论 (8)

分享到微信朋友圈

查看演示立即下载

插件描述：banneralert.js可以在网页中实现类似于iOS7的横幅通知效果，这是一款轻量级插件，压缩后只有2KB左右。

用法：

1.在页面上引入jQuery和banneralert.js（或压缩版banneralert.min.js）文件，然后引入相关的CSS文件banneralert.css。

说明：banneralert.css可以根据需要进行编辑

2.运行以下代码即可：

$("body").showbanner(选项);

选项说明：

$("body").showbanner({

选项名称	默认值	描述
title		横幅的标题。
icon		横幅的图标。（指定图片文件的路径）
content		横幅的内容。
handle	true	是否显示把手，把手的作用：点击后直接消除横幅，忽略持续时间设置。
addClass		要附加到横幅元素上的class，可用于自定义样式等，多个class请用空格分隔。
sound		横幅弹出时播放的声音。（指定音频文件的路径）
position	top	横幅的位置，包含top（顶部）和bottom（底部）两个可用的值。
html	false	是否把标题和内容作为HTML添加到横幅元素上。
show_duration	400	横幅弹出动画的持续时间（单位：毫秒）。
show_easing	swing	横幅弹出动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。
duration	3000	横幅停留在页面上的时间（单位：毫秒）。
hide_duration	400	横幅收回动画的持续时间（单位：毫秒）。
hide_easing	swing	横幅收回动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。
onClick		点击横幅时执行的脚本。
onHide		横幅消失后执行的脚本。