Recentemente, esse tipo de efeito semelhante a uma barra de progresso do anel é usado nos projetos da empresa, a partir de 0 para o fim de 100%. Os resultados da animação sempre permanecerão em 100%e não permanecerão no meio do caminho devido a relações de dados.
Como mostrado
O código é o seguinte
Demo.html
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = borda, chrome = 1"> <meta name = "viewport" = "" width = device-width, escala inicial = 1,0 "> <title> Demo </title> <yyled> .Rad-prg {Position: relativa;}. Rad-Con {Position: Absolute; Z-Index: 1; Top: 0; esquerda: 0; Text-align: Centro; Width: 90px; Altura: 90px; Padding: 10px; Fontily: Fontily:" yahei ";} </style> </adhead> <body> <div id =" indicatorContainer "> <div> <p> ￥ 4999 </p> <p> Visão geral da conta </p> </div> <script type =" text/javascript "src =" js/jQuery.mins.js "> src = "js/radialIndicator.js"> </script> <cript> $ ('#indicatorContainer'). radialIndicator ({barcolor: '#007aff', barwidth: 5, initValue: 0, RoundCorner:). $ ('#IndicatorContainer2'). Data ('radialIndicator'); Radobj.animate (100);}, 300); </script> </body> </html>radialIndicator.js Este é um plugin para jQuery
/*RadialIndicator.js v 1.0.0Author: Sudhanshu YadavcoPyright (c) 2015 Sudhanshu Yadav - Ignitersworld.com, lançado no MIT License.demo em: (; Para iniciar a barra de topvar circ = math.pi * 2, quart = math.pi/2; // função para converter o hexadecimal em rgbfunção hextorgb (hex) {// expandir o formulário de abreviação (por exemplo "03f") para a forma completa (EG "0033ff) /^#? ([af/d]) ([af/d]) ([af/d]) ([af/d]) $/i; hex = hex.replace (shortthandregex, função (m, r, g, b) {return r + r + r g + g + b + b;}); var resultado = = /^#?(f /d/d] {2})(fof/d] {2})(s Math.Round (BottomRange + ((TopRange - BottomRange) * Curshift/Pershift));} // Função para obter a cor atual em caso de função GetCurrentColor (Curper, BottomVal, TopVal, BottomColor, TopColor) {var rgBarytop = TopXor.Indexof ('#) topColor.match (// d+/g), rgbarybottom = bottomcolor.indexof ('#')! = -1? 'RGB (' + GetPropval (curshift, Pershift, rgbaryBottom [0], rgbarytop [0]) + ',' + getPropval (curshift, Pershift, rgbarybottom [1], rgbarytop [1] + ',' + getPropval (Curshift, Pershift, Pershif rgbarytop [2])+')';} // para mesclar objetofunction mesge () {var arg = argumentos, alvo = arg [0]; para (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; para (var k in obj) {se (se (se) obj [k];}}} retorna o destino;} // função para aplicar a formatação no número, dependendo do parameterFunction Formatter (padrão) {retornar função (num) {if (! padring) retornar num.toString (); num = num || 0Var numrev = num.tostring (). 0, lasthashReplaced = 0; // altera o hash com números para (var ln = output.length; i <ln; i ++) {if (! Numrev.length) quebra; if (output [i] == "#") {lASTHASHREPLACED = i; prefixoutput.splice (lasthashReplaced+1, output.LastIndexof ('#') - lasthashReplaced, numrev.Reverse (). junção ("")); return Output.Reverse () merge ({}, radialIndicator.Defaults, Indoption); Container; // Crie um elemento de tela Canelm = Document.CreateElement ("Canvas"); container.AppendChild (Canelm); this.canelm = canelm; Indoption.MinValue ||. e y eixo // Crie uma função formatadora. Circuitx.strokestyle = Indoption.BarbgColor; ctx.getImagedata (0, 0, dim, dim); // Coloque o valor inicial se definido. parseint (val); var ctx = this.ctx, Indoption = this.Indoption, curcolor = Indoption.Barcolor, Dim = (Indoption.Radius + Indoption.Barwidth) * 2, MinVal = Indoption.Minvalue, maxval val> maxval? circuitx.putImagedata (this.imgdata, 0, 0); // obtenha a cor atual se a faixa de cor for definida (tipo de curcolor == "object") {var range = object.keys (curcolor); para (var i = 1, ln = range.lengngth; i <ln; i ++); (varalval = [i 1] - 1, i) range.l); Curcolor [Bottomval], TopColor = Curcolor [TopVal], NewColor = Val == BottomVal? {curcolor = newColor; break;}}} // desenhe o círculo valuex.strokestyle = curcolor; // Adicione linecap se o valor definido nas opçõesf (indoption.RoundCorner) ctx.Linecap = "redond"; 100) - quart, false); ctx.stroke (); // Adicione o textif porcentagem (Indoption.DisplayNumber) {var cfont = ctx.font.split (''), peso = Indoption.FontWeight, Fontsize = Indoption.Fontize | (Math.floor (this.maxlength*1.4/4) -1))); cfont = Indoption.fontFamily || "Center"; ctx.TextBaseline = 'Middle'; ctx.fillText (DispVal, centro, centro);} Retorne isso;}, // Anima a barra de progresso ao valor de valueanimate: (val) {var indoption = this.Indoption, contador = this.current_value | Indoption.MinValue)/(Indoption.framenum || (Indoption.Percentage? 100: 500))), // incremento em 0,2% em cada tick e 1% se mostrando como percentualback = val <contador; // função de intervalo limpo se já iniciado (this this.Intvfunc) (this.int; > = val) ||. valor}, indoption.frameTime); retorna este;}, // Método para atualizar o optionsoption: function (chave, val) {if (val === indefinido) retornar tê -lo.Option [key]; if (['raio', 'barwidth', 'barbgcolor', 'formato', '! val; this.init (). value (this.current_value);} this.Indoption [key] = val;}};/** função inicializadora **/função radialIndicator (contêiner, opções) {var progObj = new Indicator (contêiner, opções); progobj.init (); retorno progJ; {radius: 50, //inner radius of indicatorbarWidth: 5, //bar widthbarBgColor: '#eeeeeeee', //unfilled bar colorbarColor: '#99CC33', //filled bar color , can be a range also having different colors on different value like {0 : "#ccc", 50 : '#333', 100: '#000'}format: null, //format indicator numbers, can be a # formatter ex (##,##.##) or a functionframeTime: 10, //miliseconds to move from one frame to anotherframeNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other valuesfontColor: null, //font colorfontFamily: null, //defines font familyfontWeight: 'bold', //defines font weightfontSize : null, //define the font size of indicator numberinterpolate: true, //interpolate color between rangespercentage: false, //show percentage of valuedisplayNumber: true, //display indicator numberroundCorner: false, //have round corner in filled barminValue: 0, //minimum valuemaxValue: 100, //maximum valueinitValue: 0 //define initial value of indicator};window.radialIndicator = radialIndicator;//add as a jquery pluginif ($) {$.fn.radialIndicator = function (options) {return this.each(function () {var newPCObj = radialIndicator(this, options);$.data(this, 'radialIndicator', newpcobj);});};}} (window.jQuery, janela, documento, vazio 0));O exposto acima é o efeito da barra de progresso do anel de implementação JS (de 0 a 100%) introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!