في الآونة الأخيرة ، يتم استخدام هذا النوع من التأثير على غرار شريط التقدم الحلقي في مشاريع الشركة ، بدءًا من 0 إلى إنهاء 100 ٪. ستبقى نتائج الرسوم المتحركة دائمًا بنسبة 100 ٪ ، ولن تبقى في منتصف الطريق بسبب علاقات البيانات.
كما هو موضح
الرمز كما يلي
Demo.html
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua conversion" content = "ie = edge ، chrome = 1" scale الأولي = 1.0 "> <title> العرض التوضيحي </title> <style> .rad-prg {الموضع: relative ؛}. rad-con {الموضع: absolute ؛ z-index: 1 ؛ top: 0 ؛ left: 0 ؛ text-align: center ؛ width: 90px ؛ height: 90px ؛ padding: 10px ؛ yahei "؛} </style> </head> <body> <div id =" intercontainer "> <p> <p> ￥ 4999 </p> <p> نظرة عامة على الحساب </p> </viv> <script type =" text/javascript "src =" js/jquery.min.js src = "js/radialIndicator.js"> </script> <script> $ ('#iducatorContainer'). radialIndicator ({barcolor: '#007aff' ، barwid: 5 ، initvalue: 0 ، roundcorner: true ، true ، displaning: readius: 50}) $ ('#inctatorContainer2'). البيانات ('RadialIndicator') ؛ RadoBj.animate (100) ؛} ، 300) ؛ </script> </body> </html>RadialIndicator.js هذا هو البرنامج المساعد ل jQuery
/* radialIndicator.js v 1.0.0author: sudhanshu yadavcopyright (c) 2015 sudhanshu yadav - ignitersworld.com ، تم إصداره تحت ترخيص MIT. شريط من Topvar Circ = Math.pi * 2 ، Quart = Math.pi/2 ؛ // الدالة لتحويل Hex إلى RgbFunction Hextorgb (hex) {// توسيع نموذج الاختزال (على سبيل المثال "03f") إلى شكل كامل (على سبيل المثال "0033ff") var shorthandregex = ؟ /^# ؟( Budapaf/d {2 ))( Budapaf/d/d {2 ))( Budapaf/d {2 )) $/exec(hex: Math.Round (BottomRange + ((Toprange - BottomRange) * curshift/persift)) ؛} // وظيفة للحصول على اللون الحالي في حالة getCurrentColor (curper ، bottomval ، topval ، bottomcolor ، topColor) {var rgbarytop = topColor.indexof ('#' topColor.Match (// d+/g) ، rgbarybottom = bottomcolor.indexof ('#')! = -1؟ "rgb (' + getPropval (curshift ، pershift ، rgbarybottom [0] ، rgbarytop [0]) +' ، ' + getPropval (curshift ، pershift ، rgbarybottom [1] ، rgbarytop [1] rgbarytop [2])+')' ؛} // لدمج ObjectFunction merge () {var arg = endress ، target = arg [0] ؛ for (var i = 1 ، ln = arg.length ؛ i <ln ؛ i ++) {var obj = arr OBJ [k] ؛}}} هدف الإرجاع ؛} // الدالة لتطبيق التنسيق على الرقم اعتمادًا على parameterfunction formatter (pattern) {return function (num) {if (! pattern) return num.ToString () ؛ num = num || 0 ، lasthashReplaced = 0 ؛ // تغيير التجزئة مع الأرقام (var ln = output.length ؛ i <ln ؛ i ++) {if (! numRev.Length) break ؛ if (output [i] == "#") {lasthashreplaced = i ؛ prefixoutput.splice (lashashreplaced+1 ، output.lastindexof ('#') - lashashreplaced ، numrev.reverse () دمج ({} ، radialIndicator.defaults ، indoption) ؛ Container ؛ // إنشاء عنصر Canvas canelm = document.createElement ("Canvas") ؛ Container.AppendChild (canelm) ؛ this.canelm = canelm ؛ indoption.initvalue ||. = dim/2 ؛ = dim ؛ // ارسم دائرة رمادية ctx.getimagedata (0 ، 0 ، dim ، dim ، dim) ؛ // ضع القيمة الأولية إذا تم تعريف هذا. 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 ؛ // ارسم circumentx.putimagedata (this.imgdata ، 0 ، 0) ؛ // احصل على اللون الحالي إذا كان نطاق اللون هو setif (typeof curcolor == "object") {var range. 1] ، المدى [i] ، curcolor [bottomval] ، curcolor [topval] topColor): topColor: false ؛ if (newColor! = false) {curcolor = newColor ؛ break ؛}}} // اربط th circle valuex.strokestyle = curcolor indoption.radius ، - (Quart) ، ((Circ) * perval / 100) - Quart ، false) ؛ ctx.stroke () - (Math.floor (this.maxlength*1.4/4) -1)) ؛ cfont = indoption.fontfamily || "المركز" ؛ ctx.textbaseline = 'middle' ؛ ctx.filltext (dispval ، المركز ، المركز) ؛} إرجاع هذا ؛} ، // Math.ceil ((indoption.maxvalue - indoption.minvalue)/(indoption.framenum || (indoption.percentage؟ 100: 500)) ، // زيادة setInterVal (function () {if ((! back && counter> = val) || (back && counter <= val)) {if (self.current_value == counter) {clearinterval (self.intvfunc) ؛ return ؛ incby)} ؛ "النسبة المئوية"]. indexof (مفتاح)! = -1) {this.indoption [key] = val ؛ this.init (). value (this.current_value) ؛} this.indoption [key] = val ؛} progObj ؛} // مؤشر شعاعي DefaultSRadialIndicator.Defaults = {RADIUS: 50 ، // DARIOS INNER من المؤشر: 5 ، // BAR WIDTHBARBGCOLOR: "#ccc" ، 50: '#333' ، 100: '#000'} التنسيق: NULL ، // أرقام مؤشرات التنسيق ، يمكن أن يكون#formatter ex (## ، ##. ##) أو functionframetime: 10 ، // milisecond للانتقال من إطار واحد إلى آخر ، DatefontColor: null ، // font colorfontfamily: null ، // يحدد Font FamilyFontweight: 'Bold' ، // يحدد Font WeightFontsize: null ، // define size font of inctoriSpolly: // interpolte colorn internuberctrag كاذبة ، // اطلب من زاوية مستديرة في barminvalue المملوءة: 0 ، // الحد الأدنى ValueMaxValue: 100 ، // الحد الأقصى valueinitvalue: 0 // تحديد القيمة الأولية للمؤشر} ؛ window.RadialIndicator = function) newpcobj = radialIndicator (هذا ، خيارات) ؛ $. البيانات (هذا ، 'RadialIndicator' ، newpcobj) ؛}) ؛} ؛}} (window.jquery ، window ، document ، void 0)) ؛ما ورد أعلاه هو تأثير شريط التقدم في حلقة تنفيذ JS (من 0 إلى 100 ٪) الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!