你的位置:首页 > 软件开发 > Java > 基于Animate.css的炫酷jQuery消息通知框插件

基于Animate.css的炫酷jQuery消息通知框插件

发布时间:2015-11-13 10:00:27
notification是一款基于Animate.css的炫酷jQuery消息通知框插件。该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效。在线预览 源码下载 使用方法使用该jQuery消息通 ...

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件。该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效。

基于Animate.css的炫酷jQuery消息通知框插件

在线预览    源码下载

 使用方法

使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件。

<link rel='stylesheet' href='css/animate.min.css'><link rel="stylesheet" href="css/notification.css"><script src='/images/loading.gif' data-original="js/jquery.min.js"></script><script src='/images/loading.gif' data-original="js/notification.js"></script>        

 

 HTML结构

该jQuery消息通知框插件需要一个元素来触发它,该元素可以是任意的HTML元素:按钮、超链接等。

<div value="bounceIn">bounceIn</div>        
 初始化插件

在页面DOM元加载完毕之后,可以通过下面的方法来初始化该jQuery消息通知框插件。

$('.notify').click(function (event) {    Notification.create(      // 消息通知框的标题      "Notification title",      // 消息通知框的内容      "Long text Long text Long text Long text. 2 lines = Perfect ;)",      // 图片      "img/user.jpg",      // 效果      $(event.target).text(),      // 定位      position    );  });               

原标题:基于Animate.css的炫酷jQuery消息通知框插件

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。