1、效果图
1、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eventTips</title>
<link rel="stylesheet" type="text/css" href="css/tips.less">
</head>
<body>
<a href="#" class='success-btn'>成功</a>
<a href="#" class = 'error-btn'>失败</a>
<a href="#" class = 'wait-btn'>等待</a>
<script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
<script type="text/javascript" src='js/tips.js'></script>
<script type="text/javascript">
var tips = new EventTips();
var successBtn = $(".success-btn");
var errorBtn = $(".error-btn");
var waitBtn = $(".wait-btn");
successBtn.on("click",function(){
tips.success("加载成功！");
})
errorBtn.on("click",function(){
tips.error("加载失败！");
})
waitBtn.on("click",function(){
tips.wait("加载等待！");
})
</script>
</body>
</html>
2、less代码
body, html {
100%;
height: 100%;
}
.event-tips-float {
100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 100;
}
.event-tips-content {
100%;
height: 100%;
display: block;
justify-content: center;
align-items: center;
}
.event-tips-box {
300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-right: 100px;
border-radius: 10px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.9);
padding: 30px 0;
box-sizing: border-box;
}
.event-tips-icon {
50px;
height: 50px;
margin: 0 auto;
margin-top: 20px;
}
.event-tips-msg {
100%;
text-align: center;
margin-top: 20px;
font-size: 18px;
line-height: 30px;
}
.tips-success {
background: url('../imgs/tips-icon-success.png') 100% center no-repeat;
background-size: 100%;
}
.tips-wait {
background: url('../imgs/tips-icon-wait.png') 100% center no-repeat;
animation : tipswait 1s linear infinite;
background-size: 100%;
}
.tips-err {
background: url('../imgs/tips-icon-err.png') 100% center no-repeat;
background-size: 100%;
}
@keyframes tipswait {
0% {
transform : rotate(0deg);
}
100% {
transform :rotate(360deg);
}
}
3、js代码
var EventTips = (function(window, $) {
function Tips() {
this.version = "0.01";
this.author = "";
this.init();
}
Tips.prototype.init = function() {
var tipsFloat = $('<div>').addClass('event-tips-float');
var tipsBox = $('<div>').addClass('event-tips-box');
var tipsIcon = $('<div>').addClass('event-tips-icon');
var tipsMsg = $('<div>').addClass('event-tips-msg');
tipsBox.append(tipsIcon,tipsMsg);
tipsFloat.append(tipsBox);
$('body').prepend(tipsFloat);
}
Tips.prototype.error = function(string, time) {
$('.event-tips-float').show();
var time = time || 1000;
$('.event-tips-float').find('.event-tips-icon').addClass('tips-err').removeClass('tips-success tips-wait');
$('.event-tips-float').find('.event-tips-msg').html(string);
var timer = setTimeout(function() {
$('.event-tips-float').hide();
clearTimeout(timer);
}, time);
}
Tips.prototype.success = function(string, time) {
var time = time || 1000;
$('.event-tips-float').show();
$('.event-tips-float').find('.event-tips-icon').addClass('tips-success').removeClass('tips-wait tips-err');
$('.event-tips-float').find('.event-tips-msg').html(string);
var timer = setTimeout(function() {
$('.event-tips-float').hide();
clearTimeout(timer);
}, time);
}
Tips.prototype.wait = function(string) {
var that = this;
$('.event-tips-float').show();
$('.event-tips-float').find('.event-tips-icon').addClass('tips-wait').removeClass('tips-success tips-err');
$('.event-tips-float').find('.event-tips-msg').html(string);
var timer = setTimeout(function() {
that.error('请求失败！请重试');
clearTimeout(timer);
}, 10000);
}
return Tips;
})(window, jQuery);