layer弹窗加载动画实现:
延迟3秒加载
代码语言:javascript复制
<!--
# @Time : 2018/10/29 上午12:39
# @Author : BrownWang
# @Email : 277215243@qq.com
# @File : vue3.html
# @Software: PyCharm -->
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>layer示例</title>
<style>
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<button class="online_check" href="https://www.bthlt.com/delay">加载动画</button>
</div>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/layer.js"></script>
<script>
$('.online_check').click(function () {
var href=$(this).attr('href');
layer.ready(function(){
layer.open({
type: 2,
title: '<font color="red">加载动画展示,喝茶喝茶.......。</font>',
maxmin: true,
area: ['1280px', '720px'],
content: href,
end: function(){
layer.tips('Hi', '#about', {tips: 1})
}
});
});
});
</script>
</body>
</html>