素材牛VIP会员

jQuery信息提示插件toast.js

 所属分类:网页特效-对话框/灯箱/提示

 浏览:5947次  评论:0次  更新时间:2017-06-11
牛币素材VIP可免积分下载
jQuery信息提示插件toast.js兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://github.com/IFmiss/toast
素材描述:仿安卓toast效果,兼容animate.css

详细介绍

注意:'-hastrans'是我在animate.css的基础上加的,目的是当元素为绝对定位又想用translate居中时候,修改translate的值无效,故做了一些修改,之前的class也可以正常使用

说明

position:如果toast创建的位置不是body的话就absolute

animateIn(上一个版本是animateStyle):进入的动画

animateOut(上一个版本是没有,写死的fadeout):离开的动画 现在可以使用animate的动画

padding:  padding

background: 背景色

borderRadius: 圆角

duration: 定时器时间

fontSize:  字体大小

content:  提示内容

color:   文字颜色

top: bottom底部的位置   具体的数值 或者center 垂直居中

zIndex: 层级

isCenter:   是否垂直水平居中显示

closePrev:  在打开下一个toast的时候立即关闭上一个toast

$('div_toast').toast({
    content:'你好啊!'
});

showMessage:function(content,duration,isCenter,animateIn,animateOut){} 五个参数 content:内容,duration:时长,isCenter:是否剧中,animateIn:进入动画效果,animateOut:离开的动画效果 showMessage('未曾遗忘的青春',3000,true,'bounceIn-hastrans','bounceOut-hastrans');

showMessage('这是提示信息',5000,false,'bounceIn-hastrans','bounceOut-hastrans');

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)