В последнее время этот вид эффекта, аналогичного балу прогресса в кольце, используется в проектах компании, начиная с 0 до конца 100%. Результаты анимации всегда останутся на 100%и не будут оставаться на полпути из -за отношений с данными.
Как показано
Код выглядит следующим образом
Демо .html
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge, chrome = 1"> <meta name = "viewport" = "width = device-width, chrome = 1" Начальная масштаба = 1,0 "> <Title> demo </title> <style> .rad-prg {позиция: относительно;}. Rad-con {position: Absolute; z-index: 1; top: 0; слева: 0. yahei ";} </style> </head> <body> <div id =" indicatorContainer "> <d Div> <p> ￥ 4999 </p> <p> Обзор учетной записи </p> </div> <script type =" text/javascript "src =" js/jquery.min. src = "js/radialindicator.js"> </script> <cript> $ ('#indicatorContainer'). RadialIndicator ({Barcolor: '#007aff', Barwidth: 5, initValue: 0, Roundcorner: True, процент: true, displaynumber: false, radius: 50}; $ ('#indicatorContainer2'). Data ('RadialIndicator'); Radobj.animate (100);}, 300); </script> </body> </html>RadialIndicator.js Это плагин для jQuery
/*radialIndicator.js V 1.0.0.0Author: Sudhansshu Yadavcopyright (c) 2015 Sudhansshu Yadav - Ignitersworld.com, выпущенный под лицензией MIT.demo on: ignitersworld.com/lab/radialindicator.html* starting round starcefunct Бар из Topvar Circ = Math.pi * 2, Quart = math.pi/2; // функция для преобразования шестигранного в rgbfunction hextorgb (hex) {// Расширение формы сокращения (eg "03f") в полную форму (eg "0033ff") var shorthAndrex = /^№? /^#?(^ Math.round (botherrange + ((toprange - botherrange) * curbishift/pershift));} // Функция для получения тока в случае функции getcurrentcolor (curper, bottomval, topval, bottomcolor, topcolor) {var rgbarytop = topcolor.indexof ('#')! = -1? topcolor.match (// d+/g), rgbarybottom = bottomcolor.indexof ('#')! = -1? RGB (' + getPropval (Curbift, Pershift, Rgbarybottom [0], Rgbarytop [0]) +', ' + getPropval (Curbeft, Pershift, Rgbarybottom [1], Rgbarytop [1]) +', ' + getPropval (curshift, pershift, rgbartop [1]) +', getpropval (curshift, pershift, rgbartop [1]). rgbarytop [2])+')';} // для слияния функции объекта () {var arg = аргументы, target = arg [0]; for (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; для (var k in obj) {if (obj.hashownproperpr obj [k];}}} return Target;} // Функция для применения форматирования на номере в зависимости от форматера параметра (шаблон) {return function (num) {if (! Pattern) return num.toString (); num = num || 0var numRev = num.toString (). 0, lasthashRepled = 0; // Изменения хэш с номерами (var ln = output.length; i <ln; i ++) {if (! NumRev.length) Break; if (i output [i] == "#") {laSthashRepled = i; output [i] = numRev.shift (); prefixoutput.splice (lasthashRepled+1, output.lastIndexof ('#') - lasthaShrepled, numRev.reverse (). join ("")); return output.reverse () Merge ({}, RadialIndicator.defaults, Indoption); Container; // Создать Canvas ElementVar canelm = document.createElement ("canvas"); container.appendchild (canelm); this.canelm = canelm; Indoption.minvalue ||. x и y axis // Создать форматер функцию. Circountx.strokestyle = Indoption.barbgcolor; ctx.getimagedata (0, 0, Dim, Dim); // Поместите начальное значение, если определено this.value (this.current_value); вернуть это;}, // Обновление значения индикатора без анимации VVALUE: function (val) {// return val, если Val не предоставлен (val === не определено || 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; Minval? ObjectThis.current_Value = val; // Нарисуйте bg circuitx.putimagedata (this.imgdata, 0, 0); // Получить ток Color, если цветовой диапазон setif (typeof curcolor == "Object") {var range = object.keys (curcolor); для (var i = 1, ln = range.length; 1], Topval = диапазон [i], Bottomcolor = curcolor [Bottomval], Topcolor = curcolor [topval], Newcolor = val == Bottomval? TopColor): TopColor: false; if (newcolor! = false) {curcolor = newcolor; break;}}} // Нарисовать th valuex.strokestyle = curcolor; // Добавить linecap, если значение, установленное на Optionsif (indoption.roundcorner) ctx.linecAp = "; Indoption.radius, - (Quart), ((Circ) * perval / 100) - Quart, false); ctx.stroke (); // Добавить процент текста (Indoption.displaynumber) {var cfont = ctx.font.split (''), water = indoption.fontasteable, fontsize = indoption.fontsize | (Math.floor (this.maxlength*1.4/4) -1)); cfont = Indoption.fontfamily || «Центр»; CTX.TextBaseline = 'Middle'; CTX.FILLTEXT (Dispval, Center, Center);} вернуть это;}, // Animate ProgressBar к ValueAnimate: Function (val) {var indoption = this.indoption, contrent = math. - indoption.minvalue)/(Indoption.framenum || (Indoption.percentage? 100: 500))), // увеличение на 0,2% на каждом клеке и 1%, если показано в процентном возрасте = val <counter; // clear evterval function, если уже запустите (this.intvfunc) (this.intvfunc); && counter> = val) || Достичь значение}, indoption.frametime); вернуть это;}, // метод для обновления опционов: функция (ключ, val) {if (val === undefined) вернуть это. {this.indoption [key] = val; this.init (). defaultradialindicator.defaults = {radius: 50, // внутренний радиус индикатора Barwidth: 5, // bar Widthbarbgcolor: '#eeeeeeeee', // Неполный цвет барбарколора: '#99cc33', // заполненный батончик, может быть диапазоном, также имеющим различные цвета на различных цветах: '#9cc33', // заполненный шар. '#333', 100: '#000'} Формат: null, // числа индикаторов формата, может быть#formatter ex (##, ## ##) или функция: 10, // miliseconds для перемещения от одного кадра к другому FrameNum: Null, // определяет номера кадры в индикаторе, дефицит в 100, когда они показывают процентные значения и 500 для других значений: // deformor, // for -glaill, // for -gloor, // for -glaill, // for -glaill, // for -glaill, // deformor, // deformor, // deformor, // deformor, // deformor, // deformor, // for -in indocator. ColorFontFamily: NULL, // определяет Font FamyFontweightweight: 'Bold', // определяет шрифт WeewFontsize: NULL, // Определить размер шрифта номера индикатора Interpolate: True, // Interpolate Color между Drangespercentage: false, // Процент ValuedisplayNumber: true, // indator numberroundcorner: falseIn -in in in in indator 0, // Минимальная ValueMaxValue: 100, // максимальное значение valueInitValue: 0 // определить начальное значение индикатора}; window.radialIndicator = RadialIndicator; // Добавить в виде плагинифа jQuery ($) {$. опции); $. Data (this, 'RadialIndicator', newpCobj);});};}} (window.jquery, window, document, void 0));Выше приведено эффект прохождения прохождения кольца внедрения JS (от 0 до 100%), введенный редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!