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

来源：互联网发布：淘宝内容化营销案例编辑：程序博客网时间：2024/05/22 08:14
<!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>
0 0