写了一个迷你toast提示插件,支持自定义提示文字和显示时间,不想用其他第三方的ui插件,又想要toast等小效果来完善交互的同学可以试试,
代码中还贡献了一段css能力检测js工具函数,做项目的时候可以考虑把这个插件 和 上一篇迷你confirm弹窗插件一起集成到自已写的Base/tool/Library中
代码已经粘贴出来,直接复制即可看到效果,高手勿喷,可以相互交流下(⊙⊙)
(hmtl js css已经集成到一起无需其他文件,不依赖jquery zepto等库)
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> </head> <body> <button id="button">click</button> <script type="text/javascript"> window.onload = function () { function prefixStyle(style) { var elementStyle = document.createElement('div').style var sty = style.charAt(0).toUpperCase() + style.substr(1) var vendor = (function () { var transformNames = { webkit: 'webkit' + sty, Moz: 'Moz' + sty, O: 'O' + sty, ms: 'ms' + sty, standard: style } for (var key in transformNames) { if (elementStyle[transformNames[key]] !== undefined) { return key } } return false })() if (vendor === false) return false if (vendor === 'standard') return style return vendor + sty } var toast = (function () { function Toast() { this.timer = 0; this.dom = document.createElement("div"); this.style = document.createElement("style"); this.dom.id = 'javascriptToastPop' this.dom.style.display = 'none' this.dom.innerText = '' this.style.innerHTML = '#javascriptToastPop{z-index:999999;position:fixed;display:none;top:50%;left:50%;min-3em;padding:.35em;border-radius:5%;-webkit-border-radius:5%;-ms-border-radius:5%;-moz-border-radius:5%;-o-border-radius:5%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);font-size:.8em;text-align:center;opacity:0;background:rgba(0,0,0,.3);color:#fff;line-height:1.5em;-webkit-transition:opacity 1000ms ease-out;-moz-transition:opacity 1000ms ease-out;-ms-transition:opacity 1000ms ease-out;-o-transition:opacity 1000ms ease-out;transition:opacity 1000ms ease-out}' this.init() } Toast.prototype.init = function () { document.head.appendChild(this.style); document.body.appendChild(this.dom); }; Toast.prototype.event = function (text, speed) { var that = this this.speed = speed ? speed : 2000 //this.element = document.querySelector(el); this.dom.innerText = text //this.element.addEventListener('click',function(){ that.dom.style.display = 'block' clearInterval(that.timer); that.timer = setTimeout(function () { that.timer = null; that.method(); }, 20) //},false); } Toast.prototype.method = function () { var that = this this.dom.style.opacity = 1; clearInterval(that.timer); this.timer = setTimeout(function () { that.timer = null; that.dom.style.opacity = 0; var transition = prefixStyle('transition') that.dom.addEventListener(transition + "End", function () { that.dom.style.display = 'none' console.log("动画结束"); that.dom.removeEventListener(transition + 'End', arguments.callee, false);//销毁事件 }) }, that.speed); } return new Toast(); })(); //toast.event('#button','好的good',2000) toast.event('good good', 3000) } </script> </body> </html>
觉得有帮助的同学,可以支持作者,谢谢!!
支付宝: 微信: