葫芦的运维日志_cssjshtml_弹窗加载动画实现

浏览量 4538

2018/10/29 20:54

layer弹窗加载动画实现:

延迟3秒加载

<!--
# @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>

葫芦的运维日志

打赏