<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

原文发布时间为：2018年02月13日
原文作者：lonelydawn 

本文来源：开源中国 如需转载请联系原作者