ys_toast.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
(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); |
版权声明：原创作品，如需转载，请注明出处。否则将追究法律责任
本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/2056115