打造炫酷前端通知插件EasyToaster

亲测兼容 Chrome, Firefox, IE 6+ ,由于IE 9+开始支持animation，因此 IE 9 - 没有动画过渡效果。

show.gif

引用

<link rel="stylesheet" type="text/css" href="./index.css">
<div id="slider"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
    var toaster = new Toaster()
    toaster.info({
        text: 'default config'
    })
</script>

例子

toaster.error({
    text: 'There\'s something wrong',
    textAlign: 'left',
    withIcon: true,
    closable: true,
    animation: true,
    duration: 2500,
    onClick: function () {
        // do sth
    },
    onAppear: function () {
        // do sth
    },
    onVanish: function () {
        // do sth
    }
})

方法

配置项

源码

代码说明

• css 部分预定义类样式，以便 js 创建带样式的节点
• 图标使用 dataURL 引入
• 由于 IE 9 - 不支持 animation 属性，因此没有过渡效果
• 当鼠标移到消息上，动画效果和存在时长累加暂停；当鼠标移出消息时，动画和计时恢复正常

源码和示例代码地址

GitHub