继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

自定义toast实现

所谓伊人_在水一方
关注TA
已关注
手记 273
粉丝 24
获赞 169

ys_toast.css

.ys-toast{	position:fixed;	left:0;	right:0;	top:0;	bottom:0;	z-index: 999999;}.ys-toast>em{	position:absolute;	line-height: 24px;	text-align: center;	border-radius:12px;	background-color:#000;	color:#fff;	margin:auto;	opacity:0;	font-size:16px;	transition: opacity 0.5s;	-moz-transition: opacity 0.5s; /* Firefox 4 */	-webkit-transition: opacity 0.5s; /* Safari 和 Chrome */	-o-transition: opacity 0.5s; /* Opera */	padding:14px 20px;}.ys-toast.ys-toast-show>em{	opacity:1;}


ys_toast.js

(function($){		var clientWidth = $(window).width();	var maxWidth = clientWidth-60;	function createToast(msg){		return $("<div class='ys-toast' style='display:none!important;'><em>"+msg+"</em></div>");	}    $.toast = function(msg,duration){    	var duration = duration||1500;        var $toast = createToast(msg).appendTo("html");        $toast.show();        $toast.find("em").css("max-width",maxWidth+"px");        var width = parseInt($toast.find("em").css("width"))+1;        $toast.find("em").css("width",width+"px");        var height = parseInt($toast.find("em").css("height"));        $toast.find("em").css({        	left:0,        	right:0,        	top:0,        	bottom:0,        	height:height+"px",        });                $toast.addClass("ys-toast-show");        setTimeout(function(){			$toast.removeClass("ys-toast-show");        },duration);        $toast.on("webkitTransitionEnd transitionend",function(){        	if(!$toast.hasClass("ys-toast-show")){				$toast.remove();        	}        });    };})(jQuery);


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP