版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangyanxin928/article/details/71140552
<!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>