เมื่อเร็ว ๆ นี้เอฟเฟกต์แบบนี้คล้ายกับแถบความคืบหน้าของแหวนถูกใช้ในโครงการของ บริษัท เริ่มต้นจาก 0 ถึงสิ้นสุด 100% ผลการเคลื่อนไหวจะอยู่ที่ 100%และจะไม่อยู่ครึ่งทางเนื่องจากความสัมพันธ์ของข้อมูล
ดังที่แสดง
รหัสมีดังนี้
demo.html
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatative" content = "ede = edge, chrome = 1"> <meta name = "viewport" ระดับเริ่มต้น = 1.0 "> <title> การสาธิต </title> <style> .RAD-PRG {ตำแหน่ง: สัมพัทธ์;}. rad-con {ตำแหน่ง: Absolute; z-index: 1; top: 0; ซ้าย: 0; text-align: center; width: 90px; ความสูง: 90px; yahei ";} </style> </head> <body> <div id =" indicatorContainer "> <div> <p> ￥ 4999 </p> <p> ภาพรวมบัญชี </p> </div> <script type =" script/javascript "src =" js/jquery.min.js.js src = "js/radialindicator.js"> </script> <script> $ ('#indicatorcontainer'). radialindicator ({barcolor: '#007aff', barwidth: 5, initvalue: 0, roundcorner: จริง $ ('#indicatorContainer2'). ข้อมูล ('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.demo on: ignitersworld.com/lab/radialindicator.html** บาร์จาก topvar circ = math.pi * 2, quart = math.pi/2; // ฟังก์ชั่นเพื่อแปลง hex เป็น rgbfunction hextorgb (hex) {// ขยายรูปแบบชวเลข (เช่น "03f") เป็นแบบเต็ม (เช่น "0033ff" /^#? ([AF/D]) ([AF/D]) ([AF/D]) ([AF/D]) $/i; hex = hex.replace (shortthandregex, ฟังก์ชั่น (m, r, g, b) {return r + r + g + g + b + b;}); /^#?( [[faf/dhiny {2 })( [outhaf/dhiny {2 })( [[faf/dhiny {2})$/i.exec(Hex); {return math.round (bottomRange + ((toprange - bottomRange) * curshift/pershift));} // ฟังก์ชั่นเพื่อให้ได้สีปัจจุบันในกรณีของฟังก์ชั่น getCurrentColor (curper, bottomVal, topval, bottomColor, topColor) 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 = อาร์กิวเมนต์, เป้าหมาย = arg [0]; สำหรับ (var i = 1, ln = arg.length; i <ln; i ++) {var obj = arg [i]; obj [k];}}} return target;} // ฟังก์ชันเพื่อใช้การจัดรูปแบบบนตัวเลขขึ้นอยู่กับพารามิเตอร์ formatter (รูปแบบ) {return function (num) {ถ้า (! 0, lasthashreplaced = 0; // การเปลี่ยนแปลงแฮชด้วยตัวเลขสำหรับ (var ln = output.length; i <ln; i ++) {ถ้า (! numrev.length) break; ถ้า (เอาท์พุท [i] == "#") {lastashreplaced = i; PrefixOutput.splice (lasthashreplaced+1, output.lastindexof ('#') - lasthashreplaced, numrev.reverse (). เข้าร่วม ("")); return output.reverse () {{{{} ผสาน ({}, radialIndicator.defaults, Indoption); this.indoption = indoption; // สร้าง querySelector หากสตริงตัวเลือกถูกส่งผ่านใน containerif container; // สร้าง canvas elementvar canelm = document.createelement ("Canvas") container.apherner.appendchild (canelm); this.canelm = canelm; || indoption.minvalue || 0;} ตัวบ่งชี้. จุดในแกน x และ y // สร้าง formatter functionhis.format = typeof indoption.format == "function"? Circuitx.strokestyle = Indoption.barbgcolor; ctx.getimagedata (0, 0, dim, dim, dim); // ใส่ค่าเริ่มต้นถ้ากำหนดสิ่งนี้ value (this.current_value); return this;}, // อัปเดตค่าของตัวบ่งชี้ที่ไม่มีแอนิเมชั่น: ฟังก์ชั่น (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 minval? Objectthis.current_value = val; // วาด bg circuitx.putimagedata (this.imgdata, 0, 0); // รับสีปัจจุบันถ้าช่วงสีคือ setif (typeof curcolor == "object") {var range = object.keys (Curcolor); 1. topColor): topColor: false; if (newColor! = false) {curcolor = newColor; break;}}} // วาด circle valuex.strokestyle = curcolor; // เพิ่ม linecap หากค่าตั้งค่าบนตัวเลือก (indoption.roundcorner) Indoption.radius, - (ควอร์ต), (circ) * perval / 100) - ควอร์ต, เท็จ); ctx.stroke (); // เพิ่มเปอร์เซ็นต์ textif (indoption.displaynumber) {var cfont = ctx.font.split (') - (Math.floor (this.maxlength*1.4/4) -1))); cfont = indoption.fontfamily || cfont [cfont.length - 1]; "center"; ctx.textbaseline = 'middle'; ctx.filltext (dispval, center, center);} ส่งคืนสิ่งนี้;}, // animate progressbar ไปยัง valueanimate: ฟังก์ชั่น (val) {var indoption = this.indoption, counter = this.current_value || - indoption.minvalue)/(indoption.framenum || (indoption.percentage? 100: 500)), // เพิ่มขึ้น. 2% ในทุกเห็บและ 1% หากแสดงเป็นเปอร์เซ็นต์ = val <counter; && counter> = val) || (back && counter <= val)) {ถ้า self.current_value == counter) {clearinterval (self.intvfunc); ถึงค่า}, indoption.frameTime); return this;}, // วิธีการอัพเดทตัวเลือก OptionsOption: ฟังก์ชั่น (key, val) {ถ้า (val === ไม่ได้กำหนด) ส่งคืนสิ่งนี้ [คีย์]; ถ้า (['radius', 'barwidth', 'barbgcolor' {this.indoption [key] = val; this.init (). value (this.current_value);} this.indoption [key] = val;}};/** ฟังก์ชั่น initializer **/ฟังก์ชั่น radialindicator (คอนเทนเนอร์, ตัวเลือก) {var progobj = ตัวบ่งชี้ใหม่ defaultSradialIndicator.defaults = {radius: 50, // รัศมีภายในของ indicatorbarwidth: 5, // bar widthbarbgcolor: '#eeeeeeee', // colorbarcolor ที่ยังไม่ได้ทำ: '#99cc33', // '#000'} รูปแบบ: null, // หมายเลขตัวบ่งชี้รูปแบบ, สามารถเป็น#formatter ex (##, ##. ##) หรือ functionframetime: 10, // miliseconds เพื่อย้ายจากเฟรมหนึ่งไปยังอีกเฟรม // กำหนดตัวอักษร FamilyFontweight: 'BOLD', // กำหนด FONT WeightFontSize: NULL, // กำหนดขนาดตัวอักษรของตัวบ่งชี้ numberTinterpolate: จริง // สีผสมระหว่างช่วงช่วง: false, // แสดงเปอร์เซ็นต์ของ valuedisplaynumber ValueMaxValue: 100, // ค่าสูงสุด ValueInitValue: 0 // กำหนดค่าเริ่มต้นของตัวบ่งชี้}; window.radialIndicator = radialIndicator; // เพิ่มเป็นปลั๊กอิน jQuery ($) {$ .fn.radialIndicator = ฟังก์ชั่น (ตัวเลือก) 'radialindicator', newpcobj);});};}} (window.jquery, หน้าต่าง, เอกสาร, โมฆะ 0));ข้างต้นคือผลกระทบของแถบความคืบหน้าของวงแหวน JS (จาก 0 ถึง 100%) ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!