<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美观的alert插件</title>
<script src="static/js/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="static/css/TGTool.css">
<script src="static/js/TGTool.js"></script>
<style>
body {
margin: 0;
height: 100%;
background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.button_container {
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #222;
padding: 17px 60px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
margin-bottom: 20px;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
</style>
</head>
<body>
<div class="button_container">
<button class="btn btn1"><span>Hover me!</span></button>
<button class="btn btn2"><span>Hover me! 成功</span></button>
<button class="btn btn3"><span>Hover me! 警告</span></button>
<button class="btn btn4"><span>Hover me! 失败</span></button>
</div>
<script>
$(".btn1").on("click", function() {
var tg = TGTool();
tg.info("提示");
})
$(".btn2").on("click", function() {
var tg = TGTool();
tg.success("成功");
})
$(".btn3").on("click", function() {
var tg = TGTool();
tg.warning("警告");
})
$(".btn4").on("click", function() {
var tg = TGTool();
tg.error("失败");
})
</script>
</body>
</html>
带悬停效果的Alert弹窗插件.rar （4个子文件） 
hjiaoben125 
index.html 3KB static js 
TGTool.js 15KB jquery-1.10.2.js 173B css TGTool.css 2KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
