数据加载动画从中间到两侧颜色随机

最新推荐文章于 2021-09-01 23:25:58 发布

原创最新推荐文章于 2021-09-01 23:25:58 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 代码片专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个简单的网页加载动画实现方案，通过HTML、CSS和jQuery来控制动画的显示效果。动画包括三个部分：左侧、中间和右侧，通过jQuery的animate方法改变宽度和透明度，实现了加载进度的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载动画</title>
    <!--需要更改jquery地址-->
    <script src="jquery-1.11.3.js"></script>
    <style>
        .loading{width: 100%;position: fixed;}
        .loadingLeft {  width: 50%;  height: 5px;  float: left;  }
        .loadingCenter{  width: 0%;  height: 5px;  float: left;  opacity: 0.5;  }
        .loadingRight{  width: 50%;  height: 5px;  float: right;  }
        .loading_btn {  padding: 15px;  display: block;  }
    </style>
</head>
<body>
<div class="loading">
    <div class="loadingLeft"></div>
    <div class="loadingCenter"></div>
    <div class="loadingRight"></div>
</div>
<input class="loading_btn" onclick="loading()" type="button" value="加载">
<script>

    function loading() {
        var loadingLeft = $(".loadingLeft");
        loadingLeft.animate({opacity: '0.5', width: '0%',"float":"left"});
        var loadingCenter = $('.loadingCenter');
        loadingCenter.animate({opacity: '0.5', width: '100%'});
        var loadingRight = $('.loadingRight');
        loadingRight.animate({opacity: '0.5', width: '0%',"float":"right"},function () {
            lodingTwo();
        });
    }
    function lodingTwo() {
        var loadingLeft = $(".loadingLeft");
            loadingLeft.css({"width":"50%"});
        var loadingCenter = $('.loadingCenter');
            loadingCenter.css({"width":"0%"});
        var loadingRight = $('.loadingRight');
        loadingRight.css({"width":"50%"});
        loadingAgain()
    }
    function loadingAgain() {
        var loadingLeft = $(".loadingLeft");
        loadingLeft.animate({opacity: '0.5', width: '0%',"float":"left"});
        var loadingCenter = $('.loadingCenter');
        loadingCenter.animate({opacity: '0.5', width: '100%'});
        loadingCenter.css("background-color",getRandomColor());
        loadingCenter.css("opacity","0.1");
        var loadingRight = $('.loadingRight');
        loadingRight.animate({opacity: '0.5', width: '0%',"float":"right"},function () {
           loading();
        });
    }
/*随机颜色*/
    function getRandomColor()
    {
        var c = '#';
        var cArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
        for(var i = 0; i < 6;i++)
        {
            var cIndex = Math.round(Math.random()*15);
            c += cArray[cIndex];
        }
        return c;
    }








</script>
</body>
</html>