廖鑫豪的个人博客

@lxhcool

男,爱好女

文章 8
朋友 7
来访 11

工具

框架

灵感

社区

资源

酷站

RANKINGS

    • 杭州
    • https://www.lxhcool.cn
    • 网站成立551天

    lxhcool

    • 默认

    写一个loading加载动画(辣鸡东西)

    第一次写东西,要不要先说点什么,
    不接受任何形式的批评,不然我就骂你

    html部分

     <!-- loading -->
        <div class="loading">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <h1>欢迎来到德莱联盟</h1>
        </div>

    css部分

    .loading {
            width: 100%;
            height: 100%;
            background: #19caad;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 100;
        }
        
        .loading.hide {
            display: none;
        }
    
        .loading .item {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            margin: 0 7px;
            transition: all 0.2s;
        }
    
        .loading .item.active {
            -webkit-transform: scale(1.3); 
            transform: scale(1.3);
            transition: all 0.2s;
        }
    
        .content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .content h1 {
            font-size: 30px;
            color: #333;
        }

    js部分

    <script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
    <script>
        var loading = {
            init: function() {
                var that = this;
                that.initIndex = 0;
                that.loadInterval = setInterval(that.clock, 400);
                setTimeout(function(){
                    clearInterval(that.loadInterval);
                    $('.loading').addClass('hide');
                },3000)
            },
            clock: function() {
                var that = this;
                var clearIndex = that.initIndex === 0 ? 4 : that.initIndex - 1;
                $('.item').eq(clearIndex).removeClass('active');
                $('.item').eq(that.initIndex).addClass('active');
                if (that.initIndex < 4) {
                    that.initIndex += 1;
                } else {
                    that.initIndex = 0;
                }
            }
        }
        loading.init();
    </script>

     

    Comments | NOTHING

      游客,你好 修改资料

    *邮箱和昵称必须填写