<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆形进度</title> <style type="text/css"> .circle{text-align: center;position: relative;width: 50px;} .circle font{color: #078ccf;display: block;width: 54px;height: 54px;line-height: 54px;text-align: center;position: absolute;left: 0px;top: 0px;margin: 0px; font-size:14px;} </style> </head> <body> <div class="circle"><font>59%</font></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/raphael/2.1.2/raphael-min.js"></script> <script type="text/javascript"> //进度条 (function($) { $.fn.svgCircle = function(i) { i = $.extend({ parent: null, w: 75, R: 30, sW: 20, color: ["#000", "#000"], perent: [100, 100], speed: 0, delay: 1000 }, i); return this.each(function() { var e = i.parent; if (!e) return false; var w = i.w; var r = Raphael(e, w, w), R = i.R, init = true, param = { stroke: "#f2dab1" }, hash = document.location.hash, marksAttr = { fill: hash || "#444", stroke: "none" }; r.customAttributes.arc = function(b, c, R) { var d = 360 / c * b, a = (90 - d) * Math.PI / 180, x = w / 2 + R * Math.cos(a), y = w / 2 - R * Math.sin(a), color = i.color, path; if (c == b) { path = [ ["M", w / 2, w / 2 - R], ["A", R, R, 0, 1, 1, w / 2 - 0.01, w / 2 - R] ] } else { path = [ ["M", w / 2, w / 2 - R], ["A", R, R, 0, +(d > 180), 1, x, y] ] } return { path: path } }; var f = r.path().attr({ stroke: "#eaf8ff", "stroke-width": i.sW }).attr({ arc: [100, 100, R] }); var g = r.path().attr({ stroke: "#f36767", "stroke-width": i.sW }).attr(param).attr({ arc: [0.01, i.speed, R] }); var h; if (i.perent[1] > 0) { setTimeout(function() { g.animate({ stroke: i.color[1], arc: [i.perent[1], 100, R] }, 900, ">") }, i.delay) } else { g.hide() } }) } })(jQuery); $(function() { var c = $('.detail-circle'); animateEle(); $(window).scroll(function() { animateEle() }); function animateEle() { var b = { top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height() }; c.each(function() { if (b.top <= $(this).offset().top && b.bottom >= $(this).offset().top && !$(this).data('bPlay')) { $(this).data('bPlay', true); var a = $(this).parent().find('font').text().replace(/\%/, ''); if ($(this).find("font").text() !== "100%") { $(this).svgCircle({ parent: $(this)[0], w: 90, R: 40, sW: 6, color: ["#078ccf", "#078ccf", "#078ccf"], perent: [100, a], speed: 150, delay: 400 }) } if ($(this).find("font").text() == "100%") { $(this).find("font").css("color", "#fb930d"); $(this).svgCircle({ parent: $(this)[0], w: 90, R: 40, sW: 6, color: ["#078ccf", "#078ccf", "#078ccf"], perent: [100, a], speed: 150, delay: 400 }) } } }) } }); $(function() { var c = $('.circle'); animateEle(); $(window).scroll(function() { animateEle() }); function animateEle() { var b = { top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height() }; c.each(function() { if (b.top <= $(this).offset().top && b.bottom >= $(this).offset().top && !$(this).data('bPlay')) { $(this).data('bPlay', true); var a = $(this).parent().find('font').text().replace(/\%/, ''); if ($(this).find("font").text() !== "0%") { $(this).svgCircle({ parent: $(this)[0], w: 54, R: 24, sW: 5, color: ["#078ccf", "#078ccf", "#078ccf"], perent: [100, a], speed: 150, delay: 400 }) } if ($(this).find("font").text() == "0%") { $(this).find("font").css("color", "#a9a9a9"); $(this).svgCircle({ parent: $(this)[0], w: 54, R: 24, sW: 5, color: ["#078ccf", "#078ccf", "#078ccf"], perent: [100, a], speed: 150, delay: 400 }) } } }) } }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 圆形进度 喜欢 (2)or分享 (0)
