利用js让a链接跳转时有动画(附示例)

正常情况下a href无动画,但是可通过jq阻止这个动作,并显示加载动画和通过window.location跳转,两者之间可以弄个时间来显示动画

效果:转圈圈

代码:

<script>
    $('a').click(function () {
        var href = $(this).attr('href');
        if (!href || /^(javascript:)|#/.test(href)) return;
        window.location.href = href;
        //setTimeout(function(){loading();}, 1000);
        loading();
        return false;
    });

    function loading() {
        $('body').html('<style>body { width: 100%;height: 100%;overflow: hidden;}.loading-div {width: 100vw;height: 100vh;background-color: #fff;display: table-cell;vertical-align: middle;color: #555;overflow: hidden;text-align: center;}.loading-div::before {display: inline-block;vertical-align: middle;} </style><div class="loading-div"><i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i></div>');
        return false;
    }
</script>

需要引入jq和font-awesome

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

没多大用,暂时用来排查game页面的问题

点赞
  1. 匿名说道:
    Google Chrome Windows 10
    你这里引入了 jq 和 一个 font css 文件目的只是为了一个 dom 选择器功能,以及一个图标icon,太浪费了
    1. xingye说道:
      Google Chrome Windows 10
      没事,其它代码会用到的
  2. 匿名说道:
    Google Chrome Android 9.0
    :good:

发表回复

邮箱不会被公开,用于显示Gravatar的头像