環形效果是否是至關的誘人,首先看幾個例子:
一、colorful-clock --- 漂亮
二、CSS3+js實現多彩炫酷旋轉圓環時鐘效果 --- very good
三、Percentage Loader --- 帥
colorful-clock效果圖以下:
有沒有更刺激的,接下來見證奇蹟的時刻,以下圖(精緻):
在此以前,在回顧下前兩個例子:
一、時鐘效果_raphael.js
二、幸運大抽獎
javascript
實現原理:
第一步:構造圓環css
r.customAttributes.arc = function(value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = 150 + R * Math.cos(a), y = 150 - R * Math.sin(a), path; if (total == value) { path = [ ["M", 150, 150 - R], ["A", R, R, 0, 1, 1, 149.99, 150 - R] ]; } else { path = [ ["M", 150, 150 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y] ]; } bpath = path; return { path: path }; }; r.path().attr({ arc: [100, 100, rad], 'stroke-width': 20, 'stroke': "#cecece" });
第二步:環形動起來和事件綁定html
function updateVal(value, total, R, hand, id) { if (init) { hand.animate({ arc: [value, total, R] }, 900, ">"); } else { if (!value || value == total) { value = total; hand.animate({ arc: [value, total, R] }, 750, "bounce", function() { hand.attr({ arc: [0, total, R] }); }); } else { hand.animate({ arc: [value, total, R] }, 750, "elastic"); } } }; z.mouseover(function() { this.animate({ 'stroke-width': 36, opacity: 0.75 }, 600, 'elastic'); }).mouseout(function() { this.stop().animate({ 'stroke-width': 26, opacity: 1 }, speed * 4, 'elastic'); });
第三步:倒計時java
function dinit() { if (tmptime > 0) { ds = parseInt(tmptime % 60); dm = parseInt(tmptime / 60) % 60; dh = parseInt(tmptime / 3600) % 24; txt.remove(); txt = r.text(150, 150, dh + ":" + dm + ":" + ds).attr({ font: "100 36px Arial", fill: opts.color }); } }; function playing() { dstop = setInterval(function() { tmptime--; if (tmptime <= 1) { !! opts.endSucc && opts.endSucc(); clearInterval(dstop); } else { dinit(); } }, 1000); };
搞定,大功告成。感興趣的能夠動手試試,寫更fashion的效果,期待你的見證。
參考:
polar-clock
CSS3+JS動態圓形圖例jquery代碼jquery
DEMO:web
wordpress
ui