前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml 弹窗加载动画实现

cssjshtml 弹窗加载动画实现

作者头像
葫芦
发布2019-04-17 14:47:05
1.6K0
发布2019-04-17 14:47:05
举报
文章被收录于专栏:葫芦葫芦

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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/10/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • layer弹窗加载动画实现:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档