Récemment, ce type d'effet similaire à une barre de progression de l'anneau est utilisé dans les projets de l'entreprise, de 0 à la fin de 100%. Les résultats de l'animation resteront toujours à 100% et ne resteront pas à mi-chemin en raison des relations de données.
Comme indiqué
Le code est le suivant
démo.html
<! doctype html> <html lang = "zh"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome = 1"> <meta name = "visulport" contenu = "width = device-width, Initial-Scale = 1.0 "> <Title> Demo </Title> <ystyle> .rad-prg {position: relative;}. Rad-Con {Position: Absolute; Z-Index: 1; Top: 0; Left: 0; Text-Align: Center; With:" Microsoft; 90px; Padding: 10px; Font-Family: "Microsoft. yahei ";} </ style> </ head> <body> <div id =" indicatorContainer "> <div> <p> ￥ 4999 </p> <p> Présentation du compte </p> </ div> <script type =" text / javascript "src =" js / jquet. src = "js / radialIndicator.js"> </ script> <prissing> $ ('# indicatorContainer'). radialIndicator ({BarColor: '# 007Aff', Barwidth: 5, initValue: 0, RoundCorner: True, pourcentage: true, displayNumber: false, 50}); settimeout (fonction () {Vars $ ('# indicatorContainer2'). data ('radialIndicator'); radobj.animate (100);}, 300); </cript> </ody> </html>radialdicator.js Ceci est un plugin pour jQuery
/*radialIndicator.js v 1.0.0 auteur: Sudhanshu Yadavcopyright (C) 2015 Sudhanshu Yadav - Ignitersworld.com, publié sous le MIT License.demo ON: Ignitersworld.com/lab/radialindicator. Démarrer la barre de topvar circ = math.pi * 2, quart = math.pi / 2; // fonction pour convertir hex / ^ #? ([af / d]) ([af / d]) ([af / d]) ([af / d]) $ / i; hex = hex.replace (shortthAndregex, fonction (m, r, g, b) {return r + r + g + b + b;}); var result = /^# ?( · aaf/d Math.round (Bottomage + ((TopRange - Bottomage) * Curshift / pershift));} // Fonction pour obtenir la couleur actuelle en cas de fonction GetCurrentColor (Curper, BottomVal, topvalor.indexof ('#')! = -1? topcolor.match (// d + / g), rgbarybottom = inférieurcolor.indexof ('#')! = -1? 'rgb (' + getpropval (curshift, pershift, rgbarybottom [0], rgbarytop [0]) + ',' + getpropval (curshift, pershift, rgbarybottom [1], rgbarytop [1]) + ',' + getpropval (curshift, pershift, rgbarybottom [2] rgbarytop [2]) + ')';} // pour fusionner objectFunction mege () {var arg = arguments, cible = arg [0]; for (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; pour (var k dans obj) {if (obj.hasownproperty (k)) {k] obj [k];}}} return cible;} // fonction pour appliquer le formatage sur le nombre en fonction du format de paramètre (motif) {return function (num) {if (! motif) return num.tostring (); num = num || 0var = motivev = num.tostring (). 0, lasthashreplaced = 0; // modifie le hash avec nombresfor (var ln = output.length; i <ln; i ++) {if (! Numrev.length) Break; if (output [i] == "#") {lasthashreplace = i; output [i] = numrev.shif prefixOutput.splice (lasthashReplaced + 1, output.LasTindexof ('#') - lasthashreplaced, numRev.Reverse (). JOIN ("")); return output.reverse (). Merge ({}, radialIndicator.defaults, indoption); conteneur; // Créer un Canvas ElementVar Canelm = Document.CreateElement ("Canvas"); Container.APPENDCHILD (Canelm); this.Canelm = Canelm; || INDOPTION.MINVALUE || 0;} indicateur X et y axis // Créer une fonction de format circuitx.strokestyle = indoption.barbgColor; ctx.getImagedata (0, 0, dim, dim); // mettez la valeur initiale si définie this.value (this.current_value); renvoie ce parseInt (val); var ctx = this.ctx, indoption = this.indoption, curColor = indoption.barcolor, dim = (indoption.radius + indoption.barwidth) * 2, minval = indoption.minvalue, maxval = indoption.maxvalue, Center = dim / 2; // limiter la val Minval? objectThis.current_value = val; // dessiner le BG circuitx.putImagedata (this.imgdata, 0, 0); // obtenir la couleur actuelle si la plage de couleurs est setif (typeof curcolor == "objet") {var range = object.keys (curColor); for (var i = 1, ln = plage.Legth; 1], topval = plage [i], en bas topcolor): topcolor: false; if (newcolor! = false) {curColor = newColor; Break;}}} // dessiner th cercle ValueX.strokestyle = curcolor; // ajouter linecap if valued set sur OptionsIF (indoption.roundcorner) ctx.lineCap = "rond"; ctx.beginpath (); ctx. Centre, Indoption.Radius, - (Quart), ((cirque) * Perval / 100) - Quart, false); ctx.stroke (); // Add pourcentage textif (indoption.displayNumber) {var cfont = ctx.font.split (''), poids = dim / dim / thisLend - (math.floor (this.maxlength * 1.4 / 4) -1)); cfont = indoption.fontfamily || cfont [cfont.length "Centre"; ctx.TextBaseline = 'Middle'; ctx.fillText (Dispval, Centre, Centre);} Renvoie ce - indoption.minvalue) / (indoption.framenum || (indoption.percentage? 100: 500))), // incrément de 0,2% sur chaque tick et 1% si il est affiché en pourcentage ClearInterval (this.intvfunc) si vous êtes déjà démarré (this.intvfunc) (this.intvfunc); && compter> = val) || (back && compter <= val)) {if (self.current_value ==) {clearInterval (self.intvfunc); ne pas atteindre la valeur}, indoption.frametime); renvoie ce {this.indoption [key] = val; this.init (). value (this.current_value);} this.indoption [key] = val;}}; / ** fonction initialiseur ** / fonction radialdicator (conteneur, options) {var progobj = nouvel indicateur (récipient, options); provj.init (); return progobj; DefaultSradialIndicator.Defaults = {Radius: 50, // Radius intérieur de l'indicateurBarwidth: 5, // Bar WidthBarbgColor: '#eeeeeee', // ColorbarColor de barrefil 100: Format '# 000'}: NULL, // Nombres d'indicateurs de format, peut être un formateur # Ex (##, ##. ##) ou un fonctionnement de fonction: 10, // MILISECONDS pour passer d'un trame à un autre avantage: null, // définit les nombres de cadre dans l'indicateur, les défauts NULL, // définit la police Familyfontweight: «Bold», // définit la police pondération VALUEMAXVALUE: 100, // Valeur maximaleInitValue: 0 // Définir la valeur initiale de l'indicateur}; Window.RadialiNdicator = radialIndicator; // Ajouter comme un jQuery PluginIF ($) {$ .fn.radialIndicator = function (options) {return this.each (function () {var newpcobj = RADIALDICTAG 'radialIndicator', newPCobj);});};}} (window.jquery, fenêtre, document, void 0));Ce qui précède est l'effet de la barre de progression des anneaux de mise en œuvre JS (de 0 à 100%) introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!