In jüngster Zeit wird diese Art von Effekt, die einer Ring -Fortschrittsleiste ähnelt, in den Projekten des Unternehmens verwendet, beginnend von 0 bis zu Ende von 100%. Die Animationsergebnisse bleiben immer bei 100%und bleiben aufgrund von Datenbeziehungen nicht auf halber Strecke.
Wie gezeigt
Der Code ist wie folgt
Demo.html
<! docType html> <html Lang = "Zh"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge, Chrome = 1"> <meta name = "viewPort" content = "width = rate-width, initial-scale = 1.0 "> <title> Demo </title> <style> .rad-prg {Position: relativ;}. rad-con {Position: absolut; Z-Index: 1; Top: 0; links: 0; Text-Align: Center; Breite: 90px; Höhe: 90px; Padding: 10px; font-famy:" microsoft: "microsoft: 10px; font-famy:" microsoft: "microsoft:" font-famy: "microsoft:" font-famy: " yahei ";} </style> </head> <body> <div id =" indicatorContainer "> <div> ￥ 4999 </p> <p> Kontoübersicht </p> </div> <script type =" text/javaScript " src = "js/radialindicator.js"> </script> <script> $ ('#IndicatorContainer'). Radialindicator ({Barcolor: '#007AFF', barwidth: 5, initvalue: 0, rundcorner: true, prozentual: true, displaynumber: false, radius, radius: radius: radius: 50}); $ ('#IndicatorContainer2'). Data ('Radialindicator'); Radobj.Animate (100);}, 300); </script> </body> </html>radialindicator.js Dies ist ein Plugin für JQuery
/* Radialindicator.js V 1.0.0Author: Sudhanshu Yadavcopyright (C) 2015 Sudhanshu Yadav - Ignitersworld.com, Freigabe unter der MIT -Lizenz.Demo on: ignitersworld.com/lab/radialindicator Startleiste von topvar circ = math.pi * 2, quart = math.pi/2; // Funktion zum Umwandeln von Hex in rgbfunction hextorgb (hex) {// Kurzformform (z. B. "03f") in vollständige Form (z. "0033ff") var ShorthandRegex = /^#? ([af/d]) ([af/d]) ([af/d]) ([af/d]) $/i; hex = hex.Replace (contHandRegex, Funktion (m, r, g, b) {return r + r + g + b + b;}); /^#?(; af/d weise {2})( · af/d weise {2})(AAF/d] {2 })$/i.exec(hex); Return Ergebnis? Math.Round (BottomRange + ((TopRange - BottomRange) * Curthift/Pershift)); topcolor.match (// d+/g), rgbararybottom = bottomColor.indexof ('#')! = -1? 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';}//to merge objectfunction merge() {var arg = arguments,target = arg[0];for (var i = 1, ln = arg.length; i < ln; i++) {var obj = arg[i];for (var k in obj) {if (obj.hasOwnProperty(k)) {target[k] = obj [k];}}} return target;} // Funktion zur Anwendung der Formatierung der Zahl anwenden, abhängig vom Parameterfunktionsformater (Muster) {Rückgabefunktion (num) {if (! Muster) return num.toString (); num = num || 0,lastHashReplaced = 0;//changes hash with numbersfor (var ln = output.length; i < ln; i++) {if (!numRev.length) break;if (output[i] == "#") {lastHashReplaced = i;output[i] = numRev.shift();}}//add overflowing numbers before Prefixoutput.SPLICE (Lasthashraken+1, output.lastindexof ('#') - Lasthashraete, numrev.Reverse () join (""); Rückgabeausgabe.Reverse (). Join (''); merge ({}, radialindicator.defaults, indoption); Container; // Canvas Elementvar Canelm = Dokument.Createelement ("Canvas"); Container.AppendChild (Canelm); this.canelm = canelm; || Sowohl x als CircuitX.Strokestyle = indoption.barbgcolor; ctx.getImagedata (0, 0, dim, dim); // den Anfangswert definiert. parseInt (val); var ctx = this.ctx, indoption = this.indoption, curcolor = indoption.barcolor, dim = (indoption.radius + indoption.Barwidth) * 2, minval = indoption.MinValue, maxval = indoption. Minval? Objectthis.current_value = val; // Zeichnen Sie den BG Circuitx.putimagedata (this.imgdata, 0, 0); // Aktuelle Farbe, wenn der Farbbereich SETIF (typeof curcolor == "Objekt") {var -Bereich = Objekt.Keys (curcol); für (var i = 1, ln = rabge.Leen). 1], topval = Bereich [i], bottomcolor = curcolor [bodenval], topcolor = curcolor [topval], newcolor = val == bodenval? topcolor): topcolor: false; if (newColor! = false) {curcolor = newColor; break;}}} // Zeichnen Sie den Kreiswert zeichnen. indoption.radius, - (quart), (circ) * perval / 100) - quart, false); (Math.floor (this.maxLength*1.4/4) -1)); "Center"; Ctx.TextBaseline = 'Middle'; Math.ceil ((indoption.maxValue - indoption.MinValue)/(indoption.framenum || (indoption.Percentage? 100: 500), // Inkrementierung um 0,2% auf jedem Tick und 1% if if -IF -als Prozentsatz = val <counter; setInterval (function () {if ((! zurück && counter> = val) || (zurück && counter <= val)) {if (self.current_value == counter) {clearInterval (self.intvfunc); return;} else {counter Incby)}; 'Prozentsatz']. Indexof (Schlüssel)! = -1) {this.indoption [key] = val; this.init (). value (this.current_value);} this.indoption [key] = val;}};/** Initializer -Funktion **/Funktion radialindicator (container, options) {var progObj = New INDICATOR (CONTION INTER) (container, options). progobj;} // radial Indikator defaultsRadialindicator.defaults = {Radius: 50, // innerer Radius von IndicatorBarwidth: 5, // bar widthbarbgcolor: '#eeeeeeee' ', // Unenthindere Bar -Farbkolorik -Farbstar -Valuen. "#ccc", 50: '#333', 100: '#000'} Format: null, // Format -Anzeigezahlen, kann ein#Formatter ex (##, ##. ##) oder eine Funktionsframetime sein: 10, // Milisekonds, um von einem Frame zu einem anderen Rahmen zu wechseln. VALUTSFONTCOLOR: NULL, // Schriftfarbfamilie: Null, // Definiert Font FamilyFont -Gewicht: 'BOLD', // Definiert Schriftgewichtsfont -Größen: null, // Definieren Sie die Schriftgröße der Schriftgröße von Indikatornummern. // runde Ecke in gefülltem Barmwert haben: 0, // minimales valuemaxValue: 100, // Maximal ValueInitValue: 0 // Anfangswert des Indikators definieren. = radialindicator (this, option);Die oben genannte Auswirkungen der vom Herausgeber eingeführten JS -Implementierungsring -Fortschrittsleiste (von 0 bis 100%). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!